Transparent bg color for active menu item

Public Ticket #7182

Transparent bg color for active menu item

Conversation thread

Penci Design replied

7 years ago

Staff Reply

Hi,

Please go to Customize > Addtional CSS then add custom css to do that :

.main-navigation.penci_disable_padding_menu > ul:not(.children) > li:not( :last-child ){
 padding-right: 30px
}
.main-navigation.penci_disable_padding_menu > ul:not(.children) > li:not( :last-child ):before {
    content: '/';
    position: absolute;
    right: 15px;
    margin-top: -2px;
    float: right;
    line-height: 1;
    top: 50%;
    transform: translateY( -50% );
}

You can change padding between items is 30 to any padding you want.

Best Regards,

PenciDesign

daimpa replied

7 years ago

Customer Reply

This removes background color, thanks.

Now I need:

More padding between items
A character separating items. Example: Home / Forum / Blog

Penci Design replied

7 years ago

Staff Reply

Hi,

Please go to Customize > Logo and Header Options, then scrolldown and check "Disable Padding on Menu Item Level 1" option as screenshot http://prntscr.com/mucyxo

Best Regards,

PenciDesign

daimpa started the conversation

7 years ago

Conversation Start

Hello, I need two things for main nav menu, with header style #1:

I would like to have transparent bg color for active/hover item (no chance to add "transparent" in the customization options)
I want to add a separator between the "li" items. I'd like to use "/" as a separator.

Cheers,

Daniele.

Want to join this conversation or access attachments? Sign in first.