Menu on mobile

tomhodgson · May 2015

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 http://learning-employment.com

Albert · May 2015

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; }
}

tomhodgson · May 2015

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?

Albert · May 2015

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; }
}

michelleplayoust · May 2015

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:

www.michelleplayoust.com/wp

thx, Michelle

Albert · May 2015

@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.

michelleplayoust · May 2015

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

Albert · May 2015

Do you mean change text and background color for mobile menu only when is visible?

michelleplayoust · May 2015

yes, mobile only

michelleplayoust · May 2015

... and have logo at top

thx

Albert · May 2015

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.

michelleplayoust · May 2015

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 (www.michelleplayoust.com.au)

thx, Michelle

Albert · May 2015

@michelleplayoust Sorry bu we do not have anything similar.

tomhodgson · June 2015

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 learning-employment.com to see what I mean...

Albert · June 2015

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.

michelleplayoust · August 2015

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:

http://michelleplayoust.com/wp

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

thanks, Michelle

michelleplayoust · August 2015

PS: the css at the start of this thread is not working for me to move menu below logo.

Albert · August 2015

@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; } }

michelleplayoust · August 2015

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

michelleplayoust · August 2015

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

OR

load an alternative homepage image for mobile only? (preferred - as this will help with making other text easier to read)

OR

shift homepage image down for mobile only?

thx, Michelle

Albert · August 2015

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;
}

Menu on mobile

Comments