Secondary Menu | depth 2 (Header Split 5)

fizzbell · October 2015

Hi there - when i use (Secondary Menu | depth 2 (Header Split 5) - this menu vanishes when in responsive mode - is there a way to keep it in the header when viewing on mobile devices?

pelicondesign.com/gallery/blatchford

Cheers and thanks for you time!

J

Albert · October 2015

Hi,

all details about responsive toggle you can read on http://forum.muffingroup.com/betheme/discussion/29/responsive-toggle-value

Thanks!

fizzbell · October 2015

hi there - thanks for that link! I looked over all the responses but there is no reference to the SECONDARY menu that I was asking about - its the (PROFITABILITY ASSESSMENT/CLIENT LOGIN) buttons specifically that disappear. That link only talks about the main menu. So it there a way for the SECONDARY menu to work responsively?

Link to site is - pelicondesign.com/gallery/blatchford

Cheers and thanks for your time!

J

Albert · October 2015

Ok, got it now. We were not sure which menu are you talking about. The secondary menu does not work on mobile devices unfortunately. In our opinion, there is not enough space for such menus. However, if you want to display secondary menu on mobile, please use below css:

@media only screen and (max-width: 767px) {
    .header-stack #Top_bar .secondary_menu_wrapper { margin-top: 40px !important; }
    #Header .top_bar_right { margin-top: 50px !important; }
}

fizzbell · October 2015

Ok great thanks for that although it didnt seem to help. Im using the Political Demo - so it has that custom css already there that comes with that demo. Maybe there's a line or two in there that's interfering with your new custom code?

Cheers and thanks for your time!

J

Albert · October 2015

Ok. So if above css does not work, then please use below css instead:

@media only screen and (max-width: 767px) {
    .header-stack #Top_bar .secondary_menu_wrapper {
        display: block !important;
    }
    .header-stack #Top_bar .secondary_menu_wrapper {
        margin-top: -70px !important;
    }
    .header-stack #Top_bar .logo { margin-top: 20px !important; }
    #Header a.responsive-menu-toggle { top: 30px !important; }
    #Header .secondary-menu { text-align: center !important; }
    #Header .secondary-menu > li { float: none !important; display: inline-block !important; }
}

fizzbell · November 2015

Hi there - ok thanks that did work but it now makes the social icons disappear when in responsive mode - is there anything else I could try do you think?

Albert · November 2015

Sorry but this is impossible. Or you can have display social icons on mobile or secondary menu. To display them both, modification in theme files are necessary.

Secondary Menu | depth 2 (Header Split 5)

Comments