Menu on mobile

is there anyway to make the menu appear below the logo on mobile versions of the site. At the moment it appears to the right of the logo and looks wrong. The site in question is


  • Hi,

    you can do this within below css only:
    @media only screen and (max-width: 479px) {
        #Header a.responsive-menu-toggle { top: 135px !important; rightL 165px !important; }
        .header-stack #Top_bar .logo { margin-bottom: 20px; }
  • Would there be any way for me to have the menu appearing in a coloured bar with the menu font in white and centered at all?
  • To change background color of menu on mobile devices, please use below css:
    @media only screen and (max-width: 479px) {
        #Top_bar #menu > ul, #Top_bar .menu > li ul { background: #000 !important; }
        #Top_bar #menu ul li a { color: #FFF !important; }
  • Hi,

    i am trying to do the same thing, but can't get it working.

    For mobile only, I want appearance to be in this order:

    LOGO (centered)
    MENU (centred, blue bar with white text)
    ACTION BAR contact details (as per current display)
    SOCIAL icons (as per current display)

    Note: I only want to change the colour of the toggle menu heading NOT the menu items, the css above is changing the list of menu items.

    ALSO, my logo is scaling too small (mobile only) - how can I fix this please?

    my url is:

    thx, Michelle

  • @michelleplayoust Logo does not look properly on mobile because is too big. In your case, below css will work:
    @media only screen and (max-width: 479px) {
        #Top_bar #logo img { max-width: 180px !important; }
    But about menu, you use sticky menu for header so with this style, it is not possible to center this icon on mobile devices.
  • Re logo - fixed, thx
    Re centering menu - ok.

    However as per above, can I change the text colour and background of the menu so that it stands out more?  At the moment it is so small that it is getting lost.

    Also, I wanted to be able to change the order that they appear on the page - as per above.

    thx, Michelle
  • Do you mean change text and background color for mobile menu only when is visible?
  • yes, mobile only
  • ... and have logo at top

    thx :)
  • Logo can't be at the top, but we would like to give you css to change text and background color but you must have mobile menu activated on your website because now it is not available. Please activate it.
  • OK - have switched menu button|sticky on - assume that's what you meant?

    I am trying to achieve something similar to image below - which is what I have on my current site (
    thx, Michelle


  • @michelleplayoust Sorry bu we do not have anything similar.
  • Wouldn't it be possible to actually have the menu in a physical bar appearing under the logo on a page so it's more obvious, at the moment it just says menu really small and slightly to the side, it kind of looks like a bit of an after thought but it's fundamentally one of the most important parts of the site > have a look on a phone at to see what I mean...
  • We understand what you mean but instead of this work only, you can use icon with word and also you can add background color around this so can look like a button.
  • Hi there, just following up on this thread - I didn't see the css for your recommended fix.

    For mobile only - I would like to move my menu below the logo + change the text and background colour to make the menu option look like a button. (the css above was changing the menu options - I only want to change the colour of the menu heading)

    Also for mobile - I am unable to remove padding/centre my logo.

    my site is:

    Please let me know the best CSS to use to fix the MENU and LOGO issues that I am having.

    thanks, Michelle
  • PS: the css at the start of this thread is not working for me to move menu below logo.
  • @michelleplayoust As we see, you use sticky menu on mobile which is always in the left top corner. This menu just can not be moved below the logo. With just css it's technically impossible. But to remove padding for logo on mobile devices, please use below css:
    @media only screen and (max-width: 479px) { #Top_bar .logo #logo { padding: 0 !important; } }
  • Hi, thanks for your response.  

    re LOGO padding - I have updated with the above css - which has helped - but still the logo is not centred, what can I do to fix this?

    re MENU below logo for mobile - I have removed sticky menu for mobile option, however it is still at the top.  This is my css:

    @media only screen and (max-width: 479px) {
     #Top_bar .logo #logo { padding: 0 !important;} 
      #Header a.responsive-menu-toggle { top: 135px !important; rightL 165px !important; }
        .header-stack #Top_bar .logo { margin-bottom: 20px; }

    what else do I need to do?  thx, Michelle

  • ok sorry - think some other css was conflicting w above.

    So all working now except - menu on home page is over image and difficult to see (position = top:50px - which is correct for all other pages).

    So, can I either:
    change colour of menu toggle text + background so that it has the appearance of a button and stands out more
    load an alternative homepage image for mobile only? (preferred - as this will help with making other text easier to read)
    shift homepage image down for mobile only?

    thx, Michelle
  • You can change the color of mobile menu. This can be done with below css:
    #Header a.responsive-menu-toggle {
        background: #000 !important;
        color: #fff !important;
        padding: 0 0 10px 10px !important;
Sign In or Register to comment.