custom menu menu-separator

[Milada]

Dear all,

 

 

please have look at my page: www.moryouthfulskin.com

 

 

there you will see a menu and flags to the right from the menu

 

 

I would like to put the flags under the menu, both centered.

 

Currently the menu is in After-Header menu.

 

 

I added a menu - but how do I add a custom menu like this.

How do I use   ?

How do I give it a custom css class, 'menu-separator' ?

 

Thank you in advance.

 

 

Milada

 

[dsonesuk]

Click custiom link, amenu will appear at bottom of menus listed, for this new menu name/label use   for the link use 'http://www.moryouthfulskin.com/#', IF custom css class input is not shown, click 'screen options' near top of page, and check css classes, the new input for adding css class should now appear, in this input enter 'menu-separator', move this new menu between menu with label 'Cestina' and menu with title 'English'.

 

Also, it would help if you supplied correct link to web site.

[Milada]

Hallo Dsonesuk, you are wonderful, thank you for your help! I have typed too quickly, the site name is: moreyouthfulskin.com

Although I followed your instructions, I am not sure about the menu itself - I attach a link http://moreyouthfulskin.com/wp-admin/nav-menus.php?action=edit&menu=108. Is it correctly created custom menu? Please have a look at it.

I am not sure of creating the custom menu - I simply created a new one, to which I added the language switcher. Is it correct?

Thank you for your feed-back!

 

Milada

[Milada]

just one remark: I have all languages in one switcher/menu

[dsonesuk]

I won't be able to view it, I will be denied access and taken to login screen, you just need this custom menu to appear before the language menu items with the css class i can control its presentation and cause it to become a break from the normal menu and language menu items forcing it to new line.

[Milada]

Hallo Dsonesuk, I do not know, what I am doing wrong. This is what I did:

1) I opened the After Header menu (in English)

2) clicked on Custom links and

a) to "URL" added: http://www.moreyouthfulskin.com/#

to "Link Text" added:  

3) then added this Custom link to the menu (in English)

4) to the "CSS Classes (optional)" added: menu-separator

5) moved the Custom link above the Language Switcher

6) Saved

7) repeated the same operation for other languages

but the web page did not change...

 

Do you see as a pro, what went wrong?

Thank you in advance,

 

Milada

[dsonesuk]

You only require one menu separator, that only will be required to force language menu to new line because anything following it will be forced below it, change ‘ ‘ to text any text it does not matter as it will be hidden, just give it same name as class name 'menu-separator', once i see that show, we can proceed.

[dsonesuk]

You only require one menu separator, that only will be required to force language menu to new line because anything following it will be forced below it, change ‘ ‘ to text any text it does not matter as it will be hidden, just give it same name as class name 'menu-separator', once i see that show, we can proceed.

 

I made a mistake before it should go after 'Elemis' menu.

[Milada]

@dsonesuk actually there is only one menu assigned to After-Header menu which includes: Home - Care - Recipes - Elemis (all assigned to After-Header menu) + there is the Language widget added

as there are five after-header menus, each After-Header menu has its Language widget

so I put the new custom menu after Elemis - before the Language widget

I have two menu "positions" in my theme: after-header and footer

 

does it change anything in setting this up?

[dsonesuk]

No, that is exactly what we want, the separator being last followed by language widget

[Milada]

yes, dsonesuk, it is followed by the language widget, but it does not show on the web

I must do something wrong, but do not know what...

[dsonesuk]

It is there, because its using   as menu title/label it shows as invisible space character, you must have noticed increased spacing after 'Elemis' well that is the separator. Right! it now exists and has the class i need to style add below to template style.css

.genesis-nav-menu {text-align: center;}

.menu-separator.menu-item, .menu-separator.menu-item a {
    display: block;
    font-size: 0;
    padding: 0;
}

[Milada]

dsonesuk, you are wonderful, great!!!!!! Thank you VERY much for your great help! I am very happy, it functions!!!!!

You are an IT genius!

 

Milada