Separators for the sub menu but not the main or top horizontal menu

BB Theme
1

HI,

I am using the BB theme and plug in. Is possible to have separators for the submenus but not the top/main/ horizontal custom menu please ? If so how please ?

Many thanks for the help.

Stephen

2

I have exactly the same question - so has anyone any ideas?

3

Lis,

This worked for me:

.fl-node-57028d25c8c9b .menu li {
border-left: 0px;
}

If it doesn’t work - I can have a look at your site if you wish now that I know what I am looking for lol !

Best regards,

Stephen

4

Hi Stephen & Lis,

Try the following CSS and see if it works.

.fl-page-nav .sub-menu li+li {
    border-top: 2px solid red;
}

This will add a red separator on top of each sub-menu except the first one.

Jun

5

Many thanks Jun - great stuff !

6

Hi Jun & Stephen - I tried both of these nut neither worked but it made no differen the site is a http://alviva.ehsowerbutts.com/ “About Alviva” is the main menu with the sub-menu items

7

@Stephen
You’re most welcome :slight_smile:

@Lis
Try giving this a try and let me know how it goes.

.fl-menu-horizontal .sub-menu li+li {
    border-top: 1px solid red !important;
}

Also, you might want to add this in as well to get rid of that gap on the left of the sub-menu.

.fl-menu-horizontal .sub-menu li {
    margin-left: 0px;
}

Jun

8

Thanks Jun - that fixed the lines between sub-menu items - didn’t fix the margin - it may be centering (as I have the main menu) from the looks of it.

9

Hey Lis!

I don’t see the CSS code for the margin in the site. Anyway, seems that my selector was not specific enough and you had to use !important on that border-top and since it’s always a good idea to use a more specific selector compared to resorting using !important I have updated both the codes, try these ones instead.

.fl-menu .fl-menu-horizontal .sub-menu li+li {
    margin-left: 0px;
}

.fl-menu .fl-menu-horizontal .sub-menu li+li {
    border-top: 1px solid white;
}

And put them in Appearance > Customize > Code > CSS

Jun

10

Ah so close! I can’t get the sub-menu to float left consistently - only the second li does. And I can’t control the font on that submenu - I want to remove the bold element (so just regular verdana)


.fl-menu .fl-menu-horizontal .sub-menu li+li {
	clear: both;
    border-top: 1px solid white;
    margin-left: 2px;
	float: left;
}

/* control fonts for main menu */ 
.fl-builder-content .bb-mmenu a {
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 18px;
}
11

Hey Lis!

Try this CSS for getting rid of the bold font-weight.

ul#menu-main li a {
    font-weight: normal;
}

And I’m not quite sure I understand what you want to accomplish by adding float:left; to the li’s.

Jun

12

Thanks Jun

That code makes all of the menu normal weight - I want the main menu bold (which I have) but the sub-menu to be normal weight.

I’m trying to get the sub-menu to float left - rather than be centered (as the top level menu is). Without the clear both sub-menu items (under About AlViva) are centered. with the clear the 2nd item on the sub-menu looks good - but the first one “Our approach” is still centered.

13

Hi Lis,

Like Jun, I am not entirely sure why you’re using clear:both; float:left; in the CSS you posted above.

If you want to have all your sub-menus aligned to the left and have them a lighter font weight. Can you remove the clear:both; float:left; margin-left: 2px from your CSS and then add the following, please.

.fl-menu .fl-menu-horizontal .sub-menu li {
  margin: 0;
  padding-left: 10px;
  text-align: left;
}
.fl-menu .fl-menu-horizontal .sub-menu li a {
  font-weight: 300;
}

Thanks,
Danny

14

THANK YOU -that worked

15

Hi Lis,

No problem and happy to hear your issue has been resolved.

Thanks,
Danny