Keep the menu horizontal also in mobile view

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 Plugin / Keep the menu horizontal also in mobile view

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

    Johannes
    Participant

    Hi, I am using the menu module and want the menu not to go vertical in mobile view. I will use a very short menu that can fit ok on mobile screen.
    How can I do that?

    – Johannes

    #88302

    KC
    Participant

    Hey Johannes,

    I don’t think what you are looking for is possible with our navigation menu out of the box. You could always use a 3rd party menu plugin that may allow what you need. You might also want to post on the FB Group and/or the Slack channel. The guys there might have an idea. Links below.

    https://www.facebook.com/groups/beaverbuilders/
    http://beaverbuilders.herokuapp.com/

    Thanks!

    KC

    #114359

    Jason
    Participant

    I have the same need. I would like to make the menu module which I have here appear more the way the icon row is. The icon row was an attempt (just to show what I’m trying to accomplish with the menu). I want the menu to essentially stay as a horizontal group, rather than stacked on mobile view. I have both of these rows set to appear only on mobile, and would prefer to use the menu module for this rather than the icon row.

    Can you help me with the css for this?

    http://www.realfindtricities.com/

    #114636

    Ben Carlo
    Keymaster

    Hey Jason,

    Can you try adding the CSS snippet below and see if it’s what you’re looking for?

    .fl-menu ul li {
      display: inline-block;
    }

    Ben

    #114877

    Jason
    Participant

    Thanks Ben! That got me started. I wanted to have them equal width (as in the columns example) but when I added 25% width to them there’s some margin or padding in there I just can’t track down. Can you take a look at it? Or is there a better way for me to accomplish the equal width?

    .fl-menu ul li {
      display: inline-block;
      width:25%;
    }
    #115066

    Danny
    Keymaster

    Hi Jason,

    Can you remove the width: 25%; from your CSS and then add the CSS below.

    #menu-quick-contact {
      float: none;
      border-top: 1px solid #8D8B8B;
      text-align: center;
    }
    #menu-quick-contact li {
      border-top: 0;
    }

    Which should give you something like this – https://cloudup.com/cTfBQvBncKD

    Let me know if this gives you your desired look.

    Thanks,
    Danny

    #115165

    Jason
    Participant

    Thanks Danny, that definitely helped.

    Turns out I needed to remove the “whitespace” from the elements to allow me to get the equal spacing I wanted. Kept the 25% width, but had to add a 0px font to the UL (to remove white space) and then specify font size for the li

    One final question: will use of the “.fl-menu” class affect all menus on the site?

    .fl-menu ul li {
      display: inline-block;
      width:25%;
      font-size:18px;
      padding:0px;
    }
    #menu-quick-contact {
      float: none;
      border-top: 1px solid #8D8B8B;
      text-align: center;
    }
    #menu-quick-contact li {
      border-top: 0;
      border-right:solid 1px;
    }
    #115395

    Danny
    Keymaster

    Hi Jason,

    Happy to hear you have resolved your issue and thanks for sharing the CSS.

    Thanks,
    Danny

    #115500

    Ben Carlo
    Keymaster

    Hey Jason,

    That is correct! If you want to target that specific module, just add a CSS class to it under the Advanced tab, and add that as a selector like so.. .css-class .fl-menu ul li { This should be true to the other 2 styling as well.

    Ben

    #115559

    Jason
    Participant

    Perfect! Thanks for the awesome support!

    #115590

    Ben Carlo
    Keymaster

    No worries at all, Jason.

    Enjoy!

    Ben

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

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