Fix Header Content on Mobile

BB Theme
1

Hi Support,

I’m testing my latest BB site on different devices, so far it’s looking fab (even if I say so myself!) apart from one issue I’m hoping you can help with. When viewed on iPhone portrait view the logo on header LHS overlaps the contact info text on header RHS. Can you suggest a fix to make each appear in line or if all else fails to remove one or both from mobile view?

http://www.thebeaconnewcastle.co.uk

Thanks,

Gerry

2

Hey Gerry,

Thanks for getting in touch! Sorry but I currenty have an android phone(planning to get an iphone but sill saving for it). I can see the site has a problem when viewed on my phone but I’m not exactly sure if it’s the same as you’ve described. Do you mind sending in a screenshot? Also, did you add custom CSS to the site specifically to the logo/header part?

Ben

3

Hi Ben,

Thanks for support. I got a really good deal on iPhone 5 if you want to come over to Newcastle UK I’ll tell you where to go :slight_smile:

Yes, you helped me with custom code for the header. I’m guessing you’re probably seeing the same as me. I’ve taken a screen shot, the nav text just needs to be slightly darker on mob and it should be fine.

The header logo and text problem in my other ticket can also be seen on screen shot. What’s the best way to get screen shot to you?

Thanks,

Gerry

4

Hey Gerry,

Looks like I have to pass on that offer! :slight_smile:

You can use an image hosting service like imgur. You can upload the screenshots there, paste the code here and it automatically parses it!

Ben

5

Hi Ben,

Never mind, you would normally get better deals in US anyway :slight_smile:

Here’s the image, I’m really not far away from getting this site ready to sign off so any help would be appreciated.

Thanks,

Gerry

6

http://imgur.com/0kcinOX

7

Hey Gerry,

Sorry but we’ll likely need admin access to the site to check further. You can send them via private reply.

Ben

8

[Content Hidden]

9

Hey Gerry,

This is caused by a custom CSS you’ve added. I’d suggest wrapping it around media query so it only applies to Large and Medium devices. This snippet should do it.

@media (min-width: 768px) {
  .fl-page-nav-bottom .fl-page-header-row .col-md-6 {
    display: table-cell;
    float: none;
    vertical-align: bottom;
  }
}

Hope this helps!

Ben

10

Hi Ben,

You are the man!

That’s fixed it, many thanks.

Gerry

11

Hey Gerry,

No worries! Enjoy The Beaver! :slight_smile:

Ben

12

Hi Ben,

I’ve just realised that I didn’t resolve the mobile menu nav text with you. The text doesn’t look too bad on the screenshot that I sent you however on the actual phone the main menu text is invisible on a white background. Is it possible to replicate the nav menu background on mobile so that it’s the same blue colour as on PC and tablet?

Thanks,

Gerry

13

Hey Gerry,

Try targeting this class and place a background color to it, .container nav.navbar and be sure to wrap it around a media query so it only gets applied on mobile devices. The above media query was set for Large and Medium devices, for Small devices, since the default breakpoint is 768px, you can set the media query like this.

@media (max-width: 767px) {
  /*CSS HERE*/
}

More on media queries here.

Ben

14

Thanks Ben,

That worked fine.

I’ve tried applying the same principle to to get the sub menu text in white without luck, can you see anything wrong with this:

@media (max-width: 767px) {

.fl-page-nav ul.sub-menu {
font-color: #ffffff;
}
}

Gerry

15

Hey Gerry,

You need to target the a tag since that is where the font color is applied to and we need to override that. Also, change font-color to just color.

@media (max-width: 767px) {
  .fl-page-nav ul.sub-menu li a {
    color: #ffffff;
  }
}

If you want to learn more about CSS, you can check the w3schools site. :slight_smile:

Ben

16

Thanks Ben, I appreciate your help.

Have a great weekend!

Gerry

17

Hey Gerry,

No worries! You do the same and have fun with The Beaver! :slight_smile:

Ben