Menu background in mobile ?

BB Theme
1

I have a menu in the header and setup Header/NavStyle with a background color (oppacity=100). This to get a menu that is easy to read since it sits in the Header where I have an image : Header/Header Style/Background Image.

Works great - BUT - not on mobile. In mobile I dont get my background color behind the menu and that makes it unreadable.

Also - can I change it from default “Menu” ? In Swedish its “Meny” for example…

//J
Edit : Im using Beaver Builder Theme v.1.5

2

Hi Johan,

Can you provide a link to your site, please? So we can take a closer look.

Thanks,
Danny

3

[Content Hidden]

4

Hi Johan,

If I understand your issue correctly, using the following CSS should resolve your issue.

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

Thanks,
Danny

5

I added your CSS - but it does not work… If you use a mobilephone (or resize your browser) the menu changes into the “menu button”. Then click it open the menu and you cant read the menu since it overrides your choosen color and makes it transparant to the image. The colour on the menuitems text is preserved however…? :slight_smile:

Regards,

//Johan

6

I can CSS style it like this and it will work :

@media (max-width: 767px) {
  .navbar-nav {
    background: #a88b77;
  }
}

But - now I see that when you go to a small screen it changes the color of the text as well :frowning: WHY ? I have choosen white text (almost) and black for hovercolor. Works like it should on large/medium devices. But changes when you use a phone for example. I think this is a bug ?

Regards,

//Johan

7

Hi again,

Hmmm… Im not sure (well - long time since I did CSS) why I cant style the color for the a tag withing the menuitems (e.g the text).

Trying to do this :

  .menu-item a {
      color: #ededed;
  }

To get all the in a menu-item class to have white text (like in fullscreen). And then the same for current-menu-item a that I want to be black…

Its not working :S Its really irritating that this change when you browse with a phone :expressionless:

//Johan

8

Hey Johan,

I can see you’ve added the code below to your site.

@media (max-width: 767px) {
  .menu-item {
      background: #ededed;
  }
}

What are you trying to achieve exactly? Did you want the background color of the mobile menu be similar to that of the desktop menu?

Edit: Also, you can use the filter below to change the wording of the mobile menu. Just place it inside your theme’s functions.php file, preferably on the child theme.

function my_nav_toggle_text( $text ) {
  return 'Main Menu';
}
add_filter( 'fl_nav_toggle_text', 'my_nav_toggle_text' );

Ben

9

Hi,

Here are some images to explain. This is how my menu is configured and look like on a desktop :
desktop
Here its an image (seen on top) with a brown overlay as the menu background. Selected menuitem is black, the rest is white. This is what I want and how its setup (as seen above).

But when I look at it in my iphone I get the menu button, which is fine. But NONE of these settings apply here? Not the backgroundcolor and none of the textcolors. I get this :
iphone
Which is not so user friendly and not what I have configured. Why is it not using the selected background and colors ? This is why I think this is a bug…

Yes - I added CSS to style the menu differently (so at least it would be able to be readable). Your code did not change it the way I want it. I would also (if I have to CSS style it in code) like to change the colors to the one defined in the theme settings but my lack of skill in CSS dont let me select the a tag to set the color (as described in my previous post).

Thanks a lot for your help!

//Johan

10

Gotcha! Can you remove your styling, then add the one below and see if it’s what you’re looking for?

@media (max-width: 767px) {
  .fl-page-header .fl-page-nav button.navbar-toggle {
    background: #a88b77;
    border-bottom: solid 1px #fff
  }
  .fl-page-header .fl-page-nav button.navbar-toggle span {
    color: #000;
  }
  .fl-page-header .fl-page-nav ul {
    background: #a88b77
  }
  .fl-page-header .fl-page-nav ul li a {
    color: #FFF;
  }
  .fl-page-header .fl-page-nav ul li.current-menu-item a {
    color: #000;
  }
}

Ben

11

Yes, thanks!
That works great - though I changed it to :

  .fl-page-header .fl-page-nav button.navbar-toggle {
    background: #fff;
    border-bottom: solid 1px #fff
  }

Since I get a white line at the bottom of the menu button othervise…

Thanks!

12

Hi Johan,

Happy to hear your issue has been resolved and thanks for informing us. We appreciate it.

Thanks,
Danny