Mobile menu: primary navigation and top navigation in one menu with separator

[Woordenaar]

Hi there

I have two menu’s. One primary menu with all product categories for my webshop, and a secondary “top” menu with contact, about us, blog,…

For mobile view I want to add both these menu’s in one mobile menu. I know this can be done by creating a new menu with all desired menu items in it.

BUT I would like to make it clear in the mobile menu that there is a difference between the products and the secondary items (about us, contact, blog,…) so I would like to use a separator for this like a horizontal line and maybe also change the font to a smaller size for the secondary items.

How could I achieve this??

Thanks in advance for your help!!

[basanta]

Hi There,

Thanks for writing in!

You can use a separate menu for the mobile menu and make the style you want it for the secondary menu item by adding custom CSS.

Can you please create a swheneparate mobile menu and get back to us so that we can suggest you the CSS.

Let us know.

Thanks

[Joao]

Hi There,

As you said, you will create a third menu with all the items.

So there is a few ways you can achieve, that, I think adding an Icon before the label of a part of the menu, for example envelope in front of contact etc… can be a good start.

To do that you would copy the HTML code from the icons on this list( It needs to be the html code not the shortcode) and add in front of the item label.

http://demo.theme.co/integrity-1/shortcodes/icons/

That being said, you can add the same class to each menu item and use CSS to change the color of these items or target by each menu ID.

To add class, on Appereance > Menu > on the top right corner, you will click Screen Options and toggle the class box.

You will add a class, let´s say : bluemenu and will add the following CSS to Theme Options > CSS

.x-menu li.bluemenu {
    color: blue !important;
}

You could also add a different background color for these items.

To add a separator you could target the last item of the first part via ID and add a border-bottom as well, for example

Hope it helps