Main Menus and Mobile Menus + split nav layout

Asked on March 12, 2016 in Customization.

Hey all,
I’m building a website with Layers, using the split menu layout with the logo in the center. Because Layers pulls the main menu automatically, I have to create a separate ‘mobile nav’ to flesh out the rest of the navigation – BUT – both menus are styled differently in when viewed…. the default menu is styled with sub pages indented, but the mobile nav is displayed only with parent level items… and the text is all different as well.

any suggestions on how to make this all gel together? Kind of frustrating that it only pulls the main nav but not the right nav if using this split-center header layout, or am I missing something entirely?

Thanks for your time.

bart.raboin Layers User
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on March 17, 2016.

    Hi there,

    The Mobile nav uses the header menu as it is considered the Primary menu (of which there can be only one in WordPress)¬†Because your second nav is a WordPress custom menu widget, it uses the styling for that widget, which of course is different from the theme’s menus. You have two options, restyle the custom nav to match the header menu, or hide the header menu and add all the options you want for mobile to a single custom nav (easier/recommended).

    To hide the header menu:

    .nav-mobile{display: none !important;}

    To style the custom menu widget to match default menu styling in the sidebar: