Mobile Navigation BG Color and padding

[seovunaples]

I updated the framework today.

2 questions related to the mobile smart phone versions:

1. How do I change the color of the navigation background for the smart phone versions? To be clear, I don’t mean the wheel itself but the background where it is placed on? (it has currently the same color like the site background but I”d like to change that to a custom color)

2. How can I change (increase) the padding size around the cell phone number. (Increase distance between the logo and the phone number and the content)

Please see the picture…
http://184.168.24.168/question.jpg

Thanks!
Kathrin

Topic

[Jason Bobich]

Hello Kathrin,

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the overriding edits either in your child theme or in the “Custom CSS” option on your theme options page.

You can target mobile by using @media queries like this:

@media (max-width: 767px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

If you’re using an inspector like Chrome, you can actually pop it out into a separate window, and then shrink your browser down to mobile size in order to find what you want to style. So, you’d find a container that surrounds the area you’re trying to apply a background-color to, and use that as your selector.

[seovunaples]

Hi Jason,
thank you for your fast reply. Yes, I am using firebug and was trying to locate the grey color but could not find it. I am also using a ftp and html editor program for modifications. I replaced the slate grey nav bar image with a custom one and it works fine on computer and iPad but I don’t understand why it then changes to grey on the mobile phone. Is that an image as well or is there a color definition? And maybe there is no definition at all, only the border since it’s exactly the same color as my main background color. Could you please point me in the right direction?

Thank you very much!
Kathrin

[Jason Bobich]

Can I see a link to your site where you’re trying to do this?

[seovunaples]

Hi!

Check it on your mobile phone or shrink it down. (iPad and computer displays it fine)

184.168.24.168

This picture explains it better: http://184.168.24.168/question.jpg

I’d like to define a custom purple color or create an image with a certain color (doesn’t have to be gradient) .

How can I do this?

Thank you!
Kathrin

[Jason Bobich]

Yeah, this mobile <select> menu option doesn’t look right in the updated version. You shouldn’t be seeing this box shadow around the empty space where the menu is. I’ll get this fixed in the next update to be posted in the next day or so.

Anyway, here’s one you can accomplish what you’re looking for and get the background around the select menu in your hands:

@media (max-width: 767px) {	
	.mobile_nav_select .responsive-nav {
		background: ...;
		margin: 0;
		padding: 10px;
	}
}

The header text should be much easier, though. Just find any div wrapping around and take this same approach of wrapping it in a media query and adding padding to it. Use an inspector like I showed above. What divs do you see wrapping just the phone number you could use to style and put padding around?

[seovunaples]

Thanks!

PLEASE also look into the footer, I think there is a little bug. When you shrink the window slowly down the width of the footer is sometimes bigger than the main body container.

I will wait for the fix in the next update – thank you very much!

Kathrin

[Jason Bobich]

I’m not seeing what you mean in the footer. Can you post a screenshot so I can look for it? And also let me know what web browser your screenshot is in.

[seovunaples]

http://184.168.24.168/akita_screenshot.png
http://184.168.24.168/akita_screenshot1.png

I use Safari and a MacBook Pro Retina.

[Jason Bobich]

Maybe I’m just missing something, but I’m staring closing at screenshots you’re posting and I’m shrinking your site in Safari. I still am just not seeing what you’re talking about.

[Author]

Replies