Hello. How can I adjust the styling of the Header? (The menu titles at the top right of the page)
Mostly I would like to change the font and size.
Thanks.
Hello. How can I adjust the styling of the Header? (The menu titles at the top right of the page)
Mostly I would like to change the font and size.
Thanks.
I figured it out based on some other posts on the site. I really appreciate all of your in depth support. It's one of the big reasons I bought a theme from you...as well as many others.
If you're interested this is what I have now in quick CSS (is that the same as custom.css?):
/*main menu fonts*/
.main_menu a {
font-family: "Open Sans", Helvetica, sans-serif !important;
font-size: 16px !important;
text-transform:capitalize;
letter-spacing:1px;
}
/*sub main menu fonts*/
.sub-menu a {
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 13px !important;
text-transform:uppercase;
letter-spacing:1px;
}
.header_color .main_menu ul:first-child > li a:hover {
color: #f7cc4a;
}
/*font color of submenu items*/
.header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow {
background-color: #7a4e31;
color: #ffffff !important;
}
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a {
color: #ffffff;
}
.header_color .main_menu .menu ul li a:hover {
color: #f7cc4a !important;
}strange. i just restarted my computer (and tried another computer altogether), and the colors no longer hold. The font sizes do, but not the colors. Any thoughts?
Thanks.
Hi,
Quick CSS comes before custom.css in the cascade so custom.css code will override identical code in quck css.
Is there a URL you can show us, because problems of this sort usually means something is overrising your css. I changed a few things in the code you posted. You can try that , but add it to the very end of custom.css file. Whenever you add new css, you should always place it at the very end (even in Quick CSS) to ensure that no other css comes after it. Also I am not sure about all those !important tags you are using. The purpose of !important is to override specificity .. if you are interested: http://css-tricks.com/when-using-important-is-the-right-choice/
Thanks,
Nick
Hi Nick, thanks for your help.
The URL is http://www.backforward.org
Did you change the code in the post i posted itself? or did you forget to post those changes.
So the custom.css file isn't in the wordpress backend, meaning I should download it from my server, make the changes, then re-upload?
I used the !important because that was the only way it worked, but i would love to not have to.
Thanks.
::Stephen::
I just switched everything to the custom.css file using ftp download/upload and now none of the changes are applied. what should i do?
Hi,
Taking a look now...
Please replace your entire custom.css file with this below. You had a semi colon in the font family instead of a comma ( http://backforward.org/wp-content/themes/incarnation/css/custom.css )
#header h1.logo{
padding:10px 0}
#top .title_container h1{
font-size:55px}
#top .title_container h1, #top .breadcrumb-trail, #top.page .title_container{
display:none}
/* main title on current page and hover */
#top .header_color .main_menu ul:first-child>li a:hover{
color:#f7cc4a}
#top .header_color .main_menu ul:first-child>li.current-menu-item>a, #top .header_color .main_menu ul:first-child>li.current_page_item>a, #top .header_color .main_menu ul:first-child>li.active-parent-item>a{
color:#fff}
/*font color of submenu items*/
#top .header_color .main_menu ul, #top .header_color .main_menu .menu ul li a, #top .header_color .pointer_arrow_wrap .pointer_arrow{
background-color:#7a4e31;
color:#ffffff}
#top .header_color .main_menu .menu ul li a:hover{
color:#f7cc4a !important}
/*main menu fonts*/
#top .main_menu a{
font-family:"Open Sans",helvetica neue,Helvetica,sans-serif !important;
font-size:16px !important;
text-transform:capitalize !important;
letter-spacing:1px}
/*sub main menu fonts*/
#top .sub-menu a{
font-family:"Open Sans",helvetica neue,Helvetica,sans-serif;
font-size:13px !important;
text-transform:uppercase;
letter-spacing:1px;
color:#000}
@media only screen and (min-width:768px) and (max-width:989px){
#top .align_bottom .main_menu{
width:90%}}
#top .header_color .main_menu ul:first-child>li>a{
color:#f7cc4a}
Thanks,
Nick
well it actually seems to read now. perhaps it takes some time from the server to change the custom.css
Hi,
Possibly, besides that I added ID to make this even more specific. (code above)
Thanks,
Nick
alrighty. thanks for your help, Nick.
Hi,
Please don't forget to change the code. You custom.css file still has
font-family: "Open Sans", helvetica neue; Helvetica, sans-serif !important; font-size: 16px !important;
After the word neue there is a semi-colon. So at least change:
font-family: "Open Sans", helvetica neue, Helvetica, sans-serif !important; font-size: 16px !important;
Thanks,
Nick
Thanks Nick. Will do, when I get a chance. On very limited internet at the moment.
Cheers.
::Stephen::
Hi!
Great, please report back if it worked out...
Regards,
Peter
This topic has been closed to new replies.