Mobile Menu Bar Colour Edit
-
Hi there,
How can I change the mobile header colour in CSS?
Right now it’s the default blue.Thanks!
The blog I need help with is: (visible only to logged in users)
-
-
Hi, Healthy Living is a responsive width theme, which means it adjusts the layout for any window/screen it is viewed on, so I would suggest going to Appearance > Mobile and disabling the Mobile theme and then take a look at your site on your mobile devices. Why don’t you give that a try and see what you think. We can then address the mobile menu color if you decide you want to use it.
-
Thank you for your response. Unfortunately, when I disable the site, only the logo is responsive. Everything else looks odd.
Please let me know what I can do.
Thank you!
-
The issue I’m pretty sure is the static width you have set in .site-branding. Change
width: 900px;
to
max-width: 900px;
and view your site on your phone. -
Thank you so much for your quick response!
The content now seems to fit (yay) but the logo is enlarged and out of scale.
Also, my menu bar does not show.What would be the issue now?
-
Super that we got that taken care of. I’ve got to go out for a bit, but will work on the other issues when I get back. The good news is that it isn’t anything that can’t be overcome. :)
-
The content now seems to fit (yay) but the logo is enlarged and out of scale.
Were you able to get this fixed on your own? I checked http://justmoifashion.com/ just now and I found that you used two media queries in your custom CSS to adjust the size of a background image you added with CSS (I assume that’s the logo you are referring to). I noticed you have one media query to cover screen widths from 320 to 480 pixels like this:
@media screen and (min-width : 320px) and (max-width : 480px)And another media query to cover screen widths from 768 to 1024 like this:
@media screen and (min-width : 768px) and (max-width : 1024px)That means the CSS inside those media queries will apply to those widths only and not the widths in between. Instead, you probably want the background-size rule you’re using to apply to all the widths, so what you can do is move the CSS you want to use at every screen width outside of the media queries and then just keep the “max-height” changes you’ve setup inside the media queries. Here is an example you can try out:
Replace this:
.site-branding { background: url('//justmoifashion.files.wordpress.com/2014/09/justmoifashion_logo11-copy.jpg') no-repeat; display:block; margin-left:auto; margin-right:auto; height:200px; max-width:900px } @media screen and (min-width : 320px) and (max-width : 480px) { .site-header .site-branding { background-image: url('//justmoifashion.files.wordpress.com/2014/09/justmoifashion_logo11-copy.jpg'); max-height: 60px; background-size: 110%; background-position: center; } } @media screen and (min-width : 768px) and (max-width : 1024px) { .site-header .site-branding { background-image: url('//justmoifashion.files.wordpress.com/2014/09/justmoifashion_logo11-copy.jpg'); max-height: 200px; background-size: 100%; background-position: center; } }With this:
.site-header .site-branding { background-image: url('//justmoifashion.files.wordpress.com/2014/09/justmoifashion_logo11-copy.jpg'); background-size:100%; background-position:center display:block; margin-left:auto; margin-right:auto; height:200px; max-width:900px } @media screen and (min-width: 320px) and (max-width: 480px){ .site-header .site-branding { max-height:60px; } } @media screen and (min-width: 768px) and (max-width: 1024px){ .site-header .site-branding { max-height:200px; } }See how the media queries are just used to adjust the height only? Another thing you may want to adjust different widths in the media queries themselves too. You will need to experiment to figure out what works best.
Also, my menu bar does not show.
This is happening because of how you’ve set the menu to use fixed positioning and a negative top value in your custom CSS. For example, in this block:
#site-navigation { top: -42px; right: 10px; width: 100%; position: fixed; background-color: #fff; font-family: "Arial", Times, serif; letter-spacing: 16px; font-size: 65%; position: center; }In the Healthy Living theme that you are using, the menu gets changed around a bit (including the HTML) for small screens. This is becoming more common for themes to make adjustments like this. To work around that using custom CSS, you really have to work at it sometimes as it can be a little tricky. To start, I would recommend moving the #site-navigation block I pointed out above into a media query so it only applies to browser widths larger than 990px wide:
@media screen and (min-width: 990px) { /* replace this line with your #site-navigation CSS */ }Inside that same block, you can also add a hack to make the menu move just for the logged in view. Here is an example, make sure to add it below the #site-navigation block but still inside the media query:
.logged-in #site-navigation { margin-top: 0; top: 32px; }I wouldn’t recommend trying to adjust the main menu to a fixed position for smaller screen sizes. I tried working on it and it looked pretty complex given your other CSS edits. Depending on the theme and the custom CSS, edits like that can get pretty tricky and take a lot of time to work out. If you’re interested in persuing it, I can help give you some direction but I think it could take some time and a bit of back and forth to explain some of the ins and outs of media queries and how the menu is being adjusted in that theme and how your custom CSS is overriding things for some browser widths and not others and how the HTML changes to the main navigation are affecting all of those things. It’s doable, but time consuming. Another route would be to just continue adjusting what you’ve got already bit by bit. First things first, take a look at the advice and examples from above, try them out, and see if you can get a good feel for the changes suggested so far.
- The topic ‘Mobile Menu Bar Colour Edit’ is closed to new replies.
WordPress.com Forums 