Secondary Menu | depth 2 (Header Split 5)

edited October 2015 in Menu / Mega menu
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

Comments

  • edited 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
  • 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; }
    }
  • 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
  • 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; }
    }
  • 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?
  • 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.
Sign In or Register to comment.