Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #19410

    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.

    #103592

    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;
    }

    #103593

    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.

    #103594

    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

    #103595

    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::

    #103596

    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?

    #103597

    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

    #103598

    well it actually seems to read now. perhaps it takes some time from the server to change the custom.css

    #103599

    Hi,

    Possibly, besides that I added ID to make this even more specific. (code above)

    Thanks,

    Nick

    #103600

    alrighty. thanks for your help, Nick.

    #103601

    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

    #103602

    Thanks Nick. Will do, when I get a chance. On very limited internet at the moment.

    Cheers.

    ::Stephen::

    #103603

    Hi!

    Great, please report back if it worked out…

    Regards,

    Peter

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

The topic ‘Header Styling’ is closed to new replies.