Menu Background Mobile Version

BB Theme
1

Hi,

Where can we change the background of the nav menu in mobile mode.

On main site the nav background is a darker blue and the links a light pastel blue.

When viewing on mobile the hamburger icon appears as it should, however when the menu drops down it has a white background with the pastel blue links very hard to read.

Why is the background color of the man nav not used for mobile nav too?

2

Hi Gary,

Can you provide a link to your site, please? As the styling on mobile should as far as I am aware inherit the settings you have configured in the Customizer.

Thanks,
Danny

3

http://glitzylouth.co.uk/

Site is deployed now. Note the background color of nav and link color, then make mobile size click hamburger icon we have a white BG the colors are not being inherited.

Thanks in advance

Gary

4

Hi Gary,

The mobile menu inherits the background color you select from the Customizer for the Header Style. However, as you’re using an image, it appears it is using the image instead and your image must have a grey/white-ish background color.

Therefore, if you use the following the CSS, it should change the background color to the same color used on your navigation bar when viewed on large screen devices.

@media (max-width: 767px) {
  .fl-page-nav-toggle-icon .fl-page-nav-wrap {
    background: #428bca;
  }
}

Thanks,
Danny

5

That code does nothing Danny. In addition this is a little confusing. The HEADER uses a background image not the navigation menu that is set to use background color. Why would a menu on mobile version inherit css from the header which is a different class??

6

Hi Gary,

I apologise, I mean’t to say Gradient not image in my post above. In regards to the CSS, did you disable your cache plugin before adding to you custom CSS? As, it should override the color.

Thanks,
Danny

7

Ok so I did not need the css just to specify a header BG color. I had not done that because I was using an image. Still seems strange that the mobile menu background would be inherited from the header background setting, would be much more logical that it came from the menu bg color.

8

Yes I saw that on one my sites as well. I figured out that the mobile background is the same as the header background. It does seem a bit counterintuitive, but I guess custom css will have to fix that until BB makes an update otherwise.

9

Hi Gary & Chris,

I’ve added this to our Trello as a future enhancement to the BB theme mobile menu. The issue you have is that the mobile menu will inherit the background color, gradient or image used in the Header. This is currently the intended behaviour as the navigation is in the header.

@Garymchu - If you provide temp admin access and the background color you would like. I can log into your site and add some custom CSS to resolve the issue.

Thanks,
Danny

10

No Issue left Danny, As I said i just selected a background color for the header to be inherited by the mobile menu.

That doesn’t affect the header ironically because I am using an image background specified by the client.

No extra CSS required

11

Hi Gary,

Thanks for informing us the issue has been resolved. We appreciate it.

Thanks,
Danny