Hello,
I'm having difficulty with my mobile view... the logo and the menu button are overlapping. I either need to get the logo to reduce in size (which I am fine with) or the menu button to move to the right or below. In the template I have the menu justified left and the menu justified right.

myblackfrog.com

Thank you in advance for your help.

Hi

Have you changed any template.css styling?

Cheers
Paul

Hi Paul,
Here is what is in the custom.css

#navwrap.affix {
position: fixed;
}
#grid2wrap a {
color: #FFFFFF;
}

I think it may be by your suggestion on another issue I was having...

Hi

You will need to add some media queries and browser test them

Try this

@media (max-width: 880px) and (min-width: 320px)
#navwrap .span4 {
width: 50% !important;
margin-left: 0 !important;
}

This is an example where between these widths the logo width shrinks

I would add this and then test it in firefox or IE to see if the image is shrinking or breaking through the width value

Cheers
Paul

Hi Paul,
I have added the code to the custom.css but nothing has changed. I am testing it in FF with the developers addon showing responsive sizes. I tried reducing the lowest value down to 300 and that still made no change

That's a typo from me its missing the opening brackets for the media query

@media (max-width: 880px) and (min-width: 300px) {
#navwrap .span4 {width: 70% !important;margin-left: 0 !important;}
}

Still no change Paul...

Here is what I have... and I cut/ paste so as not to miss something myself.

#navwrap.affix {
position: fixed;
}
#grid2wrap a {
color: #FFFFFF;
}
@media (max-width: 880px) and (min-width: 300px) {
#navwrap .span4 {width: 70% !important;margin-left: 0 !important;}
}

Does work in Chrome but as you say not in firefox

try using

@media (max-width: 880px) and (min-width: 320px) {
#navwrap .span4 img {width: 70% !important;margin-left: 0 !important;}
}

I can't test this via the browser

Cheers
Paul