Menu background in mobile ?

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Theme / Menu background in mobile ?

This topic is: resolved
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #114562

    Johan
    Participant

    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

    #114677

    Danny
    Keymaster

    Hi Johan,

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

    Thanks,
    Danny

    #114688

    Johan
    Participant
    This reply has been marked as private.
    #114690

    Danny
    Keymaster

    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

    #114703

    Johan
    Participant

    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…? 🙂

    Regards,

    //Johan

    #114708

    Johan
    Participant

    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 🙁 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

    #114718

    Johan
    Participant

    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 😐

    //Johan

    #114796

    Ben Carlo
    Keymaster

    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

    #114805

    Johan
    Participant

    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

    #114932

    Ben Carlo
    Keymaster

    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

    #115225

    Johan
    Participant

    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!

    #115369

    Danny
    Keymaster

    Hi Johan,

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

    Thanks,
    Danny

Viewing 12 posts - 1 through 12 (of 12 total)

The forum ‘Beaver Builder Theme’ is closed to new topics and replies.