This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Mobile Navigation BG Color and padding

  • Creator
    Topic
  • #10230
    seovunaples
    Participant

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Author
    Replies
  • #10240
    Jason Bobich
    Keymaster

    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.

    #10266
    seovunaples
    Participant

    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

    #10271
    Jason Bobich
    Keymaster

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

    #10282
    seovunaples
    Participant

    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

    #10293
    Jason Bobich
    Keymaster

    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?

    #10315
    seovunaples
    Participant

    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

    #10321
    Jason Bobich
    Keymaster

    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.

    #10341
    seovunaples
    Participant
    #10375
    Jason Bobich
    Keymaster

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.