Menu / Navigation bar change color

Hey there Hair Bear,

Hope you’re well today!

This can be easily changed with some custom CSS. Since the theme that you’re using has its own custom CSS tab you can dd the following code in Appearance -> Theme Options -> Custom CSS:

#masthead {
  background-color: #000;
}

#header-right .widget ul.menu a {
  color: #ccc;
}

This should change the top menu to black and its links to gray as the bottom one. If the code doesn’t work please post link to your site so I can take a look.

Hope this helps ??

Cheers,
Bojan

Bojan – BRILLIANT!!! THANKS!!! One small thing, there is still a thin white line that separates the menu from the picture below, is it possible to get rid of that? seanofthecongo.co.uk

Do you also know how to put the slider above the top image? ??

And finally, the sliders images, do you know how to turn off the transition effects? So that the images change, but that’s all. I don’t yet know if I want “fade”, “shuffle” etc, so would like to know if I can eradicates the effects if I need to. Thanks in advance ??

Hey again Hair Bear,

To remove the white line below you can try adding the following:

header#masthead {
  border-bottom: none;
}

As for the fade effects and replacing slider and header image with the slider I’ve checked the theme but unfortunately I wasn’t really able to figure that out, it is definitely possible but you’d have to make changes in theme files. I’d suggest opening another thread since this is off topic and maybe theme developers can offer some guidance for you to do this.

Best regards,
Bojan

That worked also. Sir, you are a legend! And thank you for letting me know which thread to use, I will do just that. Thanks again!

PS

Nearly forgot – a friend is going to be working with Adventurous very soon and he wants to know how to disable the header menu?

Hey again Hair Bear,

Both menus are in header so I’m not really sure which one are you referring to. Secondary menu (the bottom one) can be disabled by unchecking “Header Secondary Menu” from all menus in Appearance -> Menus https://screencast.com/t/qUE00rgfAOM.

Top menu can’t be disabled completely out of box. You can either create empty menu in Appearance -> Menus by clicking on the create new menu link and saving that menu as “Header Right Menu” which will result in not displaying anything in the top navigation part or use CSS to hide that navigation or hide whole header part depending what he is looking to do.

Best regards,
Bojan

Sorry, I should have clarified what I meant. He wants to remove the whole thing (the top menu, words AND the background), so that the very top of his website will be the slider’s images. He said he wants to use only the secondary menu, which will appear below the menu.

Hey again Hair Bear,

He should be able to remove the whole header part from by using the following CSS:

header#masthead {
  display: none;
}

Also please note that you can’t add logo to the secondary navigation out of a box.

Hope this helps ??

Cheers,
Bojan

Wonderful!!! Thanks, Bojan.

All resolved.

Glad that helped ??

Have a great day!

Cheers,
Bojan

Hello Bojan, I need to ask you if you know how to make the adventurous pro navigation (menu) bar much thinner? Thanks

Hey again,

To make it thinner please try adding the following as described above:

@media screen and (min-width: 1200px) {
#header-right .widget ul.menu li {
  line-height: 0.5;
}
#header-right, #header-right .widget_nav_menu, #header-right .widget_search {
  padding-top: 0;
}
#header-right #header-search-widget {
  margin-top: -7px;
}
#header-right .widget .menu a {
  padding: 0 10px 20px;
}
}

I’ve placed the code in media query so it affects only the desktop resolution since the mobile one is already thin.

Hope this helps ??

Cheers,
Bojan

Much better, thank! But I’m wondering if you could make it even slimmer? Also, is there a way of moving all the wording over so that it starts from the left (I think that that left space is for the menu name and an image, but I don’t need either). This picture shows what I’m currently looking at, and what I’d quite like it to look like….
https://www.seanofthecongo.co.uk/wp/wp-content/uploads/2015/07/menu-bar.jpg

Thank Bojan

You could try floats.

img {
float: right;
margin: 0 0 10px 10px;
}

Good luck!