Jump to content

custom menu   menu-separator


Recommended Posts

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

 

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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/#

B) 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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

@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?

Link to post
Share on other sites

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;
}
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...