Menu / Navigation bar change color
-
I’m working with the Adventurous theme. The pro version allows many colors for the menus / navigation bars, meaning both background and text. I’m operating in the standard version, which had two menus (one above the main image and one below). The menu above has a light (white, I’d say) background and dark text, whilst the menu below has a dark background and light text. Is it possible to make the light background menu dark?
-
Hey again Hair Bear,
@julienne is right, changing floats will work in this case. Please try adding the following:
#header-right { float: left; }
As for making it slimmer please try adding the following:
#header-right .widget { margin-bottom: -5px; }
Hope this helps ??
Cheers,
BojanThanks Bojan, its nice to be right…..somtimes..<grin>
If only I knew how to sort my two probs out…sigh..
I really like your menu Hair Bear.
KSorry folks, no changes unfortunately ??
Anything else? ??
Nope ??
I’m very dense at all this, so just to clarify, I’ve typed all the following into my CSS…#header-right {
float: left;
}#header-right .widget {
margin-bottom: -5px;
}h1.art-logo-name{display:block; text-align:center;}
.art-logo-text{display:block; text-align:center;}Hey again Hair Bear,
Just to be sure this is the site you’re referring to https://www.seanofthecongo.co.uk/ ?
Also I’m not being able to see the changes added when inspecting your site? Where are you adding the CSS? Are you using any caching plugins? If yes, try disabling them until you’re done with making modifications.
Best regards,
BojanTell me you never added the text I gave you HB…please?
Your them name-logo-name{display:block; text-align:center;} find it in your CSS.
.your theme name-logo-text{display:block; text-align:center;} Find it in your CSS.Do you understand now? If not wrap your CSS in the code tag here
your css
. Someone will help you more.
KHB’s site link Its 404 now Bogjan.
Julienne: I wrote down exactly…
#header-right {
float: left;
}#header-right .widget {
margin-bottom: -5px;
}h1.art-logo-name{display:block; text-align:center;}
.art-logo-text{display:block; text-align:center;}I’m unsure why I wasn’t supposed to write any of that down?
“Do you understand now?” Definitely not – I’m too thick. Happy to “wrap your CSS” for someone else to have a go, but don’t know what you mean by the “code” and also, the “your here” that I guess I’m supposed to click doesn’t take me anywhere.
Bogjan: Yes, that’s the site. Because I’ve got real people’s name on it but haven’t yet got the site okayed, so I’m having to make it all “private”. Rest assured, though, that nothing has altered.
I am going to “Appearance” > “Theme Options” > “CSS”
I’ve just checked plugins and the active ones are: Catch Updater, Elegant Themes Updater, Master Slider, One-Click Child Theme, WP Edit
Hey again Hair Bear,
That’s odd, I’m seeing other code I provided above properly applied so I’m not really sure where the issue is coming from.
Also I’m not sure what the code Julienne provided is for? What are you trying to change with this:
h1.art-logo-name{display:block; text-align:center;} .art-logo-text{display:block; text-align:center;}
Would you mind posting your whole CSS code from custom CSS tab so I can check it out. If there is a lot of code there please don’t paste it here but use https://pastebin.com/ instead.
Best regards,
Bojan#masthead {
background-color: #000;
}#header-right .widget ul.menu a {
color: #ccc;
}header#masthead {
border-bottom: none;
}body.indentation p {text-indent: 10px}
body.no-indentation p {text-indent: 0}
add_action ( ‘wp_head’ , ‘move_my_slider’);
function move_my_slider() {
//we unhook the slider
remove_action( ‘__after_header’ , array( TC_slider::$instance , ‘tc_slider_display’ ));//we re-hook the slider. Check the priority here : set to 0 to be the first in the list of different actions hooked to this hook
add_action( ‘__header’ , array( TC_slider::$instance , ‘tc_slider_display’ ), 0);
}#header-content {
padding-left: 30px;
}#main-slider img {
float: right;
}@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;#header-right {
float: left;
}#header-right .widget {
margin-bottom: -5px;
}h1.art-logo-name{display:block; text-align:center;}
.art-logo-text{display:block; text-align:center;}Hi HB, we have all been there in fact I am still where you are up to a point.
If you look at your posting space here in www.ads-software.com you will see what we call attributes:
First in the top row Its (b)which becomes (bold or (strong) if you allowed to use HTML here but I don’t believe we are.
Second attribute is (i> that makes your text (Italic) I use that on my blog when I make my point in a post.
Link is the third
attribute in the row and is self explanatory. You may ‘link’ to another site away from www.ads-software.com, or with WordPress itself.Fourth attribute is b-quote, we use that to place in a block like so what someone said. I will bloackquote Bojan for the example:
Just to be sure this is the site you’re referring to
The fifth attribute is the code I said wrap your CSS in.
The sixth attribute is an ordered list
The seventh attribute is an (ul) which you begin to use in a menu in the sidebar. I use (ul) and (li) for a menu, (li) makes a dot before what ever you put in your list menu. There are a small number of shapes for an ul menu like square or round etc. All this can be found at W3C and you may see the examples you have done there yourself.
https://www.w3schools.com/css/
Some things to keep in mind.
Always close your tags, a closed tag is (b)(/b)etc.
Always update your WordPress sites, everything including plugins. Some people also make a child theme but your nowhere near ready for that lol what I do is copy and paste my style sheets into notetab light and save it, when the software updater is done I paste it back in my theme.
WordPress can update for you but that means any changes you made to the style sheet are lost.
I think its very kind of you to try to get a solution for your friend as you struggle.
Leaving you with capable Bojan because I feel I am complicating the support.
Good luck HB!
Thanks, Julienne. You’re very kind.
Bojan hi,
The code was something I found after a search to align text left. but I did say to find that minus the code beginning which was:
h1.art-logo-name{display:block; text-align:center;}
.art-logo-text{display:block; text-align:center;}I believe I know that theme, its got art? in some of the CSS code. Its called Fern Wide the one I have.
Anyway I leave it withn you whilst I try my footer theme again and my missing sidebar.
Lovely to meet you both.
Hey again Hair Bear,
There is PHP code in your custom CSS tab, I’m not sure what you’re using this for since I’m not PHP expert but I’m pretty sure you’re supposed to add this to your theme functions.php rather then custom CSS tab from your theme. This is the code I’m referring to:
add_action ( 'wp_head' , 'move_my_slider'); function move_my_slider() { //we unhook the slider remove_action( '__after_header' , array( TC_slider::$instance , 'tc_slider_display' )); //we re-hook the slider. Check the priority here : set to 0 to be the first in the list of different actions hooked to this hook add_action( '__header' , array( TC_slider::$instance , 'tc_slider_display' ), 0); }
Also these two lines are missing semi colon at the end before the closing bracket:
body.indentation p {text-indent: 10px} body.no-indentation p {text-indent: 0}
So please replace it with this:
body.indentation p {text-indent: 10px;} body.no-indentation p {text-indent: 0;}
Also there is a closing bracket missing on the media query and closing bracket missing on the last selector there so please replace this:
@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;
With this:
@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; } }
Also as I mentioned above, what are you using this for:
h1.art-logo-name{display:block; text-align:center;} .art-logo-text{display:block; text-align:center;}
I’m pretty sure the reason it doesn’t work is just not having brackets closed there so you might want to do that first.
Hope this helps ??
Best regards,
BojanPS Regarding your original “HB”: It took me a lot of time, much soul-searching, and many goes at typing “WordPress HB” into Google (then digesting all information), to eventually realise that “HB” wasn’t a WordPress term, but rather Hair Bear! Lol!
- The topic ‘Menu / Navigation bar change color’ is closed to new replies.