WordPress.org

Ready to get started?Download WordPress

Forums

Hueman
[resolved] change nav font color (11 posts)

  1. polarte
    Member
    Posted 7 months ago #

    I would like to change the font color for just the navigation header. How do you independently change the colors of the main nav menu and the top nav menu?

  2. Craftulate
    Member
    Posted 7 months ago #

    Following because I would like to do this too!

  3. Alexander Agnarson
    Member
    Theme Author

    Posted 7 months ago #

    Something like this:

    #nav-header .nav li a { color: #ccc; }
    #nav-header .nav li > a:hover,
    #nav-header .nav li:hover > a,
    #nav-header .nav li.current_page_item > a,
    #nav-header .nav li.current-menu-item > a,
    #nav-header .nav li.current-menu-ancestor > a,
    #nav-header .nav li.current-post-parent > a { color: #fff; }

    Or, for the topbar, replace #nav-header with #nav-topbar.

  4. Craftulate
    Member
    Posted 7 months ago #

    So I just put this code into Custom CSS, changing the two color #s?

    (sorry, just getting used to CSS for the first time!)

  5. polarte
    Member
    Posted 7 months ago #

    This works great. Something else, how do you change the height of each nav bar? i would like to make #nav-topbar 35px. There also seems to be a 3/4 grey border on the main nav menu and it would be great to remove that to blend with the header color other than black/drk. grey.

    side note:
    Caftulate: just copy/paste the code in your custom.css.
    you can use the wordpress user interface to do this. APPEARANCE->EDITOR->custom.css (on right list at bottom).

  6. polarte
    Member
    Posted 7 months ago #

    also, how do you complete the header border. so there is a bottom border.

  7. Craftulate
    Member
    Posted 7 months ago #

    OK I have just tried putting that code into custom css. I have tried changing the color codes on both the bottom and top lines of the code (all I want is black nav bar text) but it doesn't make any changes.
    Any help appreciated, thanks!

  8. wigglefish23
    Member
    Posted 7 months ago #

    Did anyone figure this out, because this is on my list too. I just want to get rid of that thin border, and change the nav color, but when I add it to my custom CSS, nothing changes. Dying to know!!

  9. MutebiRoy
    Member
    Posted 7 months ago #

    To change nav colors, go to your dashboard > Appearance > Theme Options > Styling > Topbar Background or Header Background.
    Just replace the colors there with your color of choice like #F00

  10. MutebiRoy
    Member
    Posted 7 months ago #

    If there's anybody who would want to add the Search bar to the header,
    just add the following codes inside the <header><nav> Add there </nav></header>

    <div class="container">
    <div class="container-inner">
    <div class="toggle-search"><i class="fa fa-search"></i></div>
    <div class="search-expand">
    <div class="search-expand-inner">
    <?php get_search_form(); ?>
    </div>
    </div>
    </div><!--/.container-inner-->
    </div><!--/.container-->
    /////

  11. dodoland
    Member
    Posted 1 month ago #

    i add another php code (qtranslate) in the header nav inside a div class="toggle-search"

    it works but when i click it, the search div in the top nav opens at the same time

    how can i fix it?

Reply

You must log in to post.

About this Theme

About this Topic