Keep the menu horizontal also in mobile view

Beaver Builder
1

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
2

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

3

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/

4

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

5

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%;
}
6

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

7

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;
}
8

Hi Jason,

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

Thanks,
Danny

9

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

10

Perfect! Thanks for the awesome support!

11

No worries at all, Jason.

Enjoy!

Ben