Support » Theme: OceanWP » How to a second “mobile” header in custom header template?

  • OceanWP is proving wonderfully flexible, thanks. We’ve created custom headers for various pages, which look fine on desktop. But the mobile version doesn’t show the menu.

    This support response from almost a year ago says that we need to “create two headers in your custom header template, the first one for desktop and the second for mobile”.

    I’m checked out on creating custom headers in the theme library and picking among them for each different page.

    But how do I create “two headers in custom header template”, and then designate that one is for mobile and the other for desktop?

    Should I just create a custom header with the needed mobile and desktop components, and then use custom css with media queries via the customizer to show what I want in desktop, mobile, and tablet?

    • This topic was modified 5 years, 1 month ago by cberendes.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hello,

    Since you are using Topbar menu and in OceanWP topbar menu moves into the main menu in the mobile version. Therefore it is not working.
    To fix it, go to Dashboard > Appearance > Menus and set a menu as the main menu.
    Now edit your custom header template. Add a section above the main section and use ‘Custom Header Nav’ widget to display menu.

    Thread Starter cberendes

    (@cberendes)

    Thanks for the quick answer. Some progress, in that I now see a menu on mobile, but it’s empty (on mobile, fine on desktop).

    Main menu set: Appearance->Menus

    Added the Custom Header Nav to the “red owl” header in the Theme Library like so.

    Looks fine in desktop view.

    In the mobile view both on my Moto and in Chrome Developer set to Mobile I get [Hamburger]Menu on the top. When I click this, I get [Hamburger]Close, which I can click to get back to the [Hamburger]Menu.

    Update: in mobile view, when I click the menu, I can see the search box behind the title, so it seems as if the menu is opening behind the section below the Custom Header Nav…

    • This reply was modified 5 years, 1 month ago by cberendes.

    Hello,

    Add the below CSS to the Customize > Custom CSS section or add a z-index value to the menu section in the Elementor to fix this.

    div#mobile-dropdown {
        z-index: 99;
    }
    Thread Starter cberendes

    (@cberendes)

    Thanks. That worked. I really appreciate the quick responses.

    1. Aside from using Chrome Developer tools, is there some background/tutorial info on OceanWP that would have given me the background to find the answer myself?

    2. I’m also still curious about the previous answer: “create two headers in your custom header template, the first one for desktop and the second for mobile” and what that meant. That person was satisfied with the answer, it looks like, but I couldn’t figure out whether it applied or how to implement it.

    Okay, create two header section, one for mobile and other for desktop.
    Now go to Section > Advanced > Responsive and hide mobile header section for the desktop and similarly for the Desktop header. Hide it for the tab and mobile.

    You can watch some tutorial, oceanwp documentation and join oceanwp community on facebook. It will help you a lot to know more about it.

    Thread Starter cberendes

    (@cberendes)

    Thanks. I’ve really appreciated the support.

    You’re welcome!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to a second “mobile” header in custom header template?’ is closed to new replies.