WordPress.org

Ready to get started?Download WordPress

Forums

Hueman
[resolved] How to change the Top Bar /Menu text color (16 posts)

  1. tossytm
    Member
    Posted 7 months ago #

    I am using hueman wordpress theme, I would like to :
    1.change the text color of top bar menus. How can I do?
    2. I would like to change the background and text color for Header Menu (without including logo area). Please help

    please help

  2. Alexander Agnarson
    Member
    Theme Author

    Posted 7 months ago #

    1) With this custom css:

    #nav-topbar .nav li a { color: red; }
    #nav-topbar .nav li > a:hover,
    #nav-topbar .nav li:hover > a,
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-menu-ancestor > a,
    #nav-topbar .nav li.current-post-parent > a { color: blue; }

    2) With this custom css you change background of the header menu:

    #nav-header.nav-container { background-color: red; }
    @media only screen and (min-width: 720px) {
    	#nav-header .nav ul { background-color: red; }
    }

    With this custom css you change the text color of the menu:

    #nav-header .nav li a { color: red; }
    #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: blue; }
  3. tossytm
    Member
    Posted 7 months ago #

    Hi
    I tried to paste the code in style.css is not working, visit here http://www.mpe.ac.tz. please help?

    what can I do now, can I give you my login details to help me? please email me your email

    thanks

  4. tossytm
    Member
    Posted 7 months ago #

    please help;

    I would like to:

    1. change the topbar menu background and text color ( background be yellow and the text color be #002147
    2. change the header menu background and text color ( background be yellow and text color be #002147

    please help

  5. tossytm
    Member
    Posted 7 months ago #

    well done!

  6. tzinser
    Member
    Posted 6 months ago #

    Hi Alexander. I am having the same problem as tossytm. I want to change the text color for the header navigation bar on the Hueman theme. (Great work by the way.) Right now it's white on white. I'm not sure where to enter the above script on the custom css to change the color. Any directions would be appreciated. (Site:http://soulcenteredhealing.net/wptest/)

  7. noaneo
    Member
    Posted 1 month ago #

    hi,

    Alexander Agnarson gave the codes to change the font color in the menus, I tried and it works.

    /* Navigation */
    #nav-topbar .nav li a { color:#000; }
    #nav-topbar .nav li > a:hover,
    #nav-topbar .nav li:hover > a,
    #nav-topbar .nav li.current_page_item > a,
    #nav-topbar .nav li.current-menu-item > a,
    #nav-topbar .nav li.current-menu-ancestor > a,
    #nav-topbar .nav li.current-post-parent > a { color:#000; }
    
    #nav-header .nav li a { color:#000; }
    #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:#000; }

    To change the background it is in the theme options -> Styling.
    Shame that Alexander Agnarson has no option to change the theme color in the menus.

  8. DGLauren
    Member
    Posted 1 day ago #

    For Beefstick: I hope this brings this thread to the top of the forum, as it contains the information a number of us have been struggling with. I am using Alex's custom css in my child theme, but it has not been working.

    Are there things we need to be inserting in this code (like color names/numbers) that is just not intuitive to those of use who are new to website construction?

  9. DGLauren
    Member
    Posted 1 day ago #

    For example, here's the original from Alex:

    #nav-header .nav li a { color: red; }
    #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: blue; }

    Should I alter it like this?

    #nav-header .nav li a { color: red; }
    #nav-header .nav li > a:hover { color: green; },
    #nav-header .nav li:hover > a,
    #nav-header .nav li.current_page_item > a:active { color: purple; },
    #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: blue; }

    It's not as clear cut as my previous theme's child stylesheet where all I had to add was:

    a {color:#3B8DBD;}
    a:hover {color:#8C2183;}
    a:active {color:#205C1E;}
  10. noaneo
    Member
    Posted 1 day ago #

    hi,

    you started the style.css of the child theme like that?

    /*
    	Theme Name: Arnouville Passe
    	Author: noaneo
    	Template: hueman
    
    */
    
    @import url("../hueman/style.css");
    
    /* ------------------------------------------------------------------------- *
     *  Theme customization starts here
    /* ------------------------------------------------------------------------- */
    
    /* Global */
    .mystyle {}
    
    /* Tablet - 800px, 768px & 720px */
    @media only screen and (min-width: 720px) and (max-width: 800px) {
    .s2-expand .s2 { background:none; background-color: #FFF; }
    }
    
    /* Mobile - 480px & 320px */
    @media only screen and (max-width: 719px) {
    .s1-expand .s1 { background:none; background-color: #FFF; }
    }
    
    /* Mobile - 320px */
    @media only screen and (max-width: 479px) {
    .sidebar { background:none; background-color: #FFF; }
    }
    
    /* Customisation */

    For red and green is good but purple and green, no, I've tested, not good.

  11. noaneo
    Member
    Posted 1 day ago #

    Menu active

    #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: blue;
    }
  12. DGLauren
    Member
    Posted 16 hours ago #

    @noaneo: Thanks for getting back to me! The use of the words "red, green, purple, etc" were for examples only. I normally use hexcode numbers. I was following Alexander's lead. He used the basic color name, so I followed suit. It doesn't surprise me that purple wouldn't work, but I sort of thought green might. lol

    Since I normally use numbers, I should have in my example. I just couldn't tell from his list of code exactly where I should put the color ID's and how to identify them (specifically, for active, current, visited, etc.)

    I'll post my style.css in the next box, and show you where I inserted the color info.

  13. DGLauren
    Member
    Posted 16 hours ago #

    @noaneo: Everything in all caps will be notes to you:

    /*
    	Theme Name: Hueman Child - DGLauren
    	Theme URI: http://alxmedia.se/themes/hueman/
    	Description: Sample child theme for customization.
    	Author: DGLauren
    	Author URI:
    	Template: hueman
    	Version: 1.0.0
    */
    
    @import url("../hueman/style.css");
    
    /* ---------------------------------------------------------
       Theme customization starts here
      ---------------------------------------------------------- */
    
    RIGHT HERE IS WHERE I STARTED ADDING IN MY ALTERATIONS. 
    
    I PASTED ALEXANDER'S CODE IN, THEN CHANGED IT TO REFLECT WHAT I WANTED
     IT TO BE, BUT I DIDN'T UNDERSTAND HOW TO ALTER IT AND IT DIDN'T WORK.
     (EXAMPLES OF HOW I CHANGED IT WOULD BE #d4117f INSTEAD OF "RED" AND
    #3258d6 INSTEAD OF BLUE.) THE FOLLOWING IS AN ACTUAL CUSTOM CODE THAT'S
     IN MY FILE.
    
    (I REMOVED ALL THE ATTEMPTS TO CHANGE MY LINK COLORS THAT DIDN'T WORK.)
    
    #nav-header.nav-container {box-shadow: none;}
    
    /* ---------------------------------------------
    Next up: Removing the automatic Hueman page titles.
    THIS WAS BECAUSE MY PAGES ALREADY HAD TITLES SHOWING.
    ----------------------------------------------*/
    
    .page-title { display:none;}
    
    /* ------------------------------------------
    Everything below this line was in this stylesheet
    before I added anything.
    --------------------------------------------*/
    
    /* Global */
    .mystyle {}
    
    /* Tablet - 800px, 768px & 720px */
    @media only screen and (min-width: 720px) and (max-width: 800px) {
    	.mystyle {}
    }
    
    /* Mobile - 480px & 320px */
    @media only screen and (max-width: 719px) {
    	.mystyle {}
    }
    
    /* Mobile - 320px */
    @media only screen and (max-width: 479px) {
    	.mystyle {}
    }
  14. DGLauren
    Member
    Posted 16 hours ago #

    @noaneo: Thank you!!! You helped me finally get something to work. I put my chosen hexcode number into the string of code you gave me and now my menu text (when hovered over) shows up the same color as the active page: #019fde.

    My background is white and the inactive menu text is white, so you can't even tell there is a menu unless you mouse over where you'd guess a menu would be. Could you also give me a code for the regular menu text?

    I'm stoked! I've been struggling with this for days.

  15. Beefstick
    Member
    Posted 13 hours ago #

    @DG this might work for you,

    #nav-topbar .nav li a {
    color: #247db5;
    }

    or, depending on what menu you are using,

    #nav-header .nav li a {
    color: #247db5;
    }

    and of course you can use whatever color you want.

  16. noaneo
    Member
    Posted 8 hours ago #

    hi,
    the address of your site, we can have?

    In style.css

    there are unnecessary lines

    / *
    Theme Name: Hueman Child - DGLauren
    Theme URI: http://alxmedia.se/themes/hueman/
    Description: Sample child theme for customization.
    Author: DGLauren
    Author URI:
    Template: HUEman
    Version: 1.0.0
    * /

    line necessary

    / *
    Theme Name: Hueman Child
    Author: DGLauren
    Template: hueman
    
    * /
    @import url("../hueman/style.css");

    then this first

    /* ------------------------------------------------------------------------- *
     *  Theme customization starts here
    /* ------------------------------------------------------------------------- */
    
    /* Global */
    .mystyle {}
    
    /* Tablet - 800px, 768px & 720px */
    @media only screen and (min-width: 720px) and (max-width: 800px) {
    .s2-expand .s2 { background:none; background-color: #FFF; }
    }
    
    /* Mobile - 480px & 320px */
    @media only screen and (max-width: 719px) {
    .s1-expand .s1 { background:none; background-color: #FFF; }
    }
    
    /* Mobile - 320px */
    @media only screen and (max-width: 479px) {
    .sidebar { background:none; background-color: #FFF; }
    }
    
    /* Customisation */

    Only after you put your custom code

    #nav-header.nav-container {box-shadow: none;}
    .page-title { display:none;}

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.