WordPress.org

Forums

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

  1. polarte
    Member
    Posted 1 year 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 1 year ago #

    Following because I would like to do this too!

  3. Alexander Agnarson
    Member
    Theme Author

    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

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

  7. Craftulate
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 year 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?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic