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

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 / Separators for the sub menu but not the main or top horizontal menu

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

    Stephen
    Participant

    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

    #113995

    Lis
    Participant

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

    #114059

    Stephen
    Participant

    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

    #114099

    Jun
    Keymaster

    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

    #114110

    Stephen
    Participant

    Many thanks Jun – great stuff !

    #114409

    Lis
    Participant

    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

    #114458

    Jun
    Keymaster

    @Stephen
    You’re most welcome 🙂

    @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

    #114479

    Lis
    Participant

    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.

    #114616

    Jun
    Keymaster

    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

    #114797

    Lis
    Participant

    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;
    }
    #114954

    Jun
    Keymaster

    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

    #115009

    Lis
    Participant

    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.

    #115027

    Danny
    Keymaster

    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

    #115045

    Lis
    Participant

    THANK YOU -that worked

    #115339

    Danny
    Keymaster

    Hi Lis,

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

    Thanks,
    Danny

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

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