Okay
  Public Ticket #2066748
Nav Bar
Closed

Comments

  •  2
    AntoniaRBD started the conversation
    July 2, 2019 at 10:01am

    Hello,

    One more question - currently the nav bar has a line underenath each individual link. Is it possible to remove the line, add a hover colour and once clicked the current selected item is also highlighted in a colour? Rather than having a line underneath each link?

    Additionally I was wondering, if it's possible to have a separator in between each link like this:

    home | about us | what we do | contact

    Thanks,
    Antonia


  • [deleted] replied
    July 3, 2019 at 8:39am

    Hi Antonia,

    This is a customization question and support doesn't offer customization services as we wrote on our support homepage and on this area. I will try to help you this time thoughsmile.png

    You can try something like this:

    Please add the code below to your Custom CSS area:

    /* Menu: Margin Left */
.main-header.menu-type-standard-menu .standard-menu-container div.menu>ul>li+li, 
.main-header.menu-type-standard-menu .standard-menu-container ul.menu>li+li {
    margin-left: 15px;
}
/* Menu: Hide Underline */
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a:after, 
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a:after {
    display: none;
} 
/* Menu: Item Spacing */
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a span, 
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a span {
    padding: 6px 10px;
}
/* Menu: Hover Style */
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a:hover span, 
.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a:hover span {
    background: #f7c016;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
/* Menu: Removing the menu Hover Style from Submenus  */
.sub-menu a span {
    background: transparent !important;
}
/* Menu: Active menu style */
li.current-menu-item a span {
    background: #f7c016;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
/* Sub-Menu: Borders Radius */
.main-header.menu-type-standard-menu .standard-menu-container ul.menu ul {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

    Have a nice day!