Customizing .catchresponsive-nav-menu and outline

Tagged: Color, css, header, html, menu, navigation, responsive

This topic has 3 replies, 2 voices, and was last updated 8 years, 7 months ago by robertl.

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

Author

Posts
April 25, 2016 at 11:03 am #90333

robertl
Participant

Hi Support,

I’m needing some help on some custom css (preferably). This my site: http://tuanzbuild.tuanz.org.nz (still a work in progress). Where the black colour is showing in the main nav menu, I want to be able to preferably make it clear/or transparent. And make only the horizontal outlining of nav menu visiable (black).

I am wanting a main nav menu like our client’s old site here: http://tuanz.org.nz/ where JUST the horizontal outlining of the navigation menu is visable

Could someone assist me with this please?

April 25, 2016 at 12:28 pm #90348
Mahesh
Participant
@robertl: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:
```
.nav-primary {
    background-color: transparent;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.catchresponsive-nav-menu .current-menu-item > a, .catchresponsive-nav-menu .current-menu-ancestor > a, .catchresponsive-nav-menu .current_page_item > a, .catchresponsive-nav-menu .current_page_ancestor > a {
    background-color: transparent;
}

.catchresponsive-nav-menu li:hover>a {
	background-color: transparent;
}
```
Regards,
Mahesh
April 25, 2016 at 12:54 pm #90349

robertl
Participant

Thanks for that Mahesh,

Looks like it made all the text transparent as well. Could you code it to make all the text visible in black?

Cheers,
Rob

April 25, 2016 at 12:58 pm #90351

robertl
Participant

Please ignore that, I figured it out. Thanks again Mahesh 🙂
Author

Posts