Header menu, drop down, background colour, mobile view

BB Theme
1

Site: http://www.centre4health.co.uk/

I hope you can help. When I resize the site to a ‘tablet’ size the drop-down from the header menu changes. When full screen the drop-down is on top of the header but when resized I see the bottom of the header and then the background, which is ugly.

Is there some CSS I can use to achieve consistency? And if so where? Z-Order?

I really like the theme and plug-in - makes working with WordPress a brilliant user experience.

Mark

2

Hey Mark,

Welcome to the BB forums! :slight_smile:

Glad you’re loving it! :slight_smile: I really can’t see anything wrong with your site. Everything is working from my end, at least for me. Could you take a screenshot of what you are referring to? You can upload it to imgur then just post the link here.

Ben

3

Hi Ben

Thanks for the speedy reply. If you look at Home you’ll see that the bottom of the header shows through.

The link is here

I’ll delete the image when done … I’ve not used Imgur before …

Mark

4

Hey Mark,

I’m not seeing the same thing from my end. You may be seeing a cached version of that page. Try doing a Hard Refresh on your browser and see if that fixes it. Check screenshot.
http://imgur.com/eiUwT0Z

Ben

5

Hi Ben

Sorry for the delay in replying … my daughter got her final grades and we’ve been celebrating.

I cleared the cache and removed junk files both from history and using a cleaner. I’m still seeing the same in Chrome and Vivaldi … I’ll check in the morning and see if I have router cacheing.

Thanks for your time … I appreciate it!

Mark

6

Hi Mark and Ben,
I have a similar issue.
You can see a site I am working on when it is shrunk down to a phone size - the mobile menu look pretty awful - so would appreciate some help on fixing this?
https://drive.google.com/file/d/0Bx4kKvaKeveHVEpBR0tDZ1FidHc/view?usp=sharing
(it is the same on my iPhone 5 too!)
I’d like some direction on how to remove the lines and how to change the header image for mobile size? (maybe a different image, or just the site title)

The site is currently in a demo folder - the full site is:
http://everythingsarchie.com/demo/

Regards, Dave

7

I’ve marked the ticket as not resolved as I am still seeing this, something for Ben and colleagues this morning.

Mark

8

Hey Mark,

I can see it now. It wasn’t there before probably because your background image on that header was pulled from an external site and it doesn’t exist. We have 2 options for this. We can remove the background image on mobile or fix the height on mobile so it doesn’t go over the menu. Try either of the CSS snippets below.

/*Removing the header background image on mobile*/
@media (max-width: 767px) {
  header.fl-page-header {
    background-image: none;
  }
}

/*Setting a height for the header background image on mobile*/
@media (max-width: 767px) {
  header.fl-page-header {
    background-size: auto 160px;
  }
}

Hope this helps!

Ben

9

Hey Dave,

Sorry I didn’t notice your reply earlier. You can use the exact same code as the first one above to change the background image on mobile. Just change none to url(www.domain.com/mobile-header-bg.jpg).

Ben

10

Hi Ben

Thank you, I have used the second snippet and it has worked perfectly.

Thank you for resolving the problem. Have a great weekend!

I have not marked this resolved because of Dave’s question, but my query is sorted.

Mark

11

Hey Mark,

No worries! You have a great weekend as well! :slight_smile:

Ben