WordPress.org

Forums

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

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

    well done!

  6. tzinser
    Member
    Posted 1 year 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 11 months 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 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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;}
  17. DGLauren
    Member
    Posted 10 months ago #

    @Beefstick: That little bit of code worked like a charm! Thank you!!

    @noaneo: Thank you so much for helping me get this straightened out. The more I put it into proper order, the better I understand this.

    1. I took out the unnecessary lines in the top section of my style sheet, as you suggested, but left the version number. (It appeared that way once I uploaded the child theme, so I left it as it was, except for naming it.)

    2. I never was certain where to start placing my own changes, so I just guessed that it should be right after the comment saying it starts here. I have now moved all my alterations to below the responsive codes. And that's where I'll add anything new I write.

    The site is still under construction and is not open to the public yet, but it should be soon. I'll definitely post a link to it once it is.

    It's exciting to see it beginning to look the way I want it to. Thank you all so much!

    I'm going try again to change the dropdown-menu background color. With the custom css in the right places, maybe it will work this time.

  18. DGLauren
    Member
    Posted 10 months ago #

    Another question, for clarification...

    #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: #e8f7fe;
    }

    In the above example, does this just mean that everything in that list will be assigned the color #e8f7fe? That commas just mean it's a group and the style will be applied to all, rather than having to write out each of them individually?

    What does the ">" mean? I don't exactly know how to look something like that up.

    I use it and have seen it used by others when following a path in steps of a process, like:
    Start > Control Panel > Hardware and Sound, etc.
    Is it used in code in a similar manner?

  19. DGLauren
    Member
    Posted 10 months ago #

    In this same thread, second post down, Alexander Agnarson states:
    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; }
    }
    I think I've tried every version of this I can think of and still can't get the color of the background to change in my header menu. Any ideas?

  20. Beefstick
    Member
    Posted 10 months ago #

    @DG,

    The ">" is a css combinator <-- google it for more info. Yes the comma is used to separate multiple items with the same style.

    You should be able to change the background color of your menu in your themes options panel under styling > topbar background. but....if you really want this bit of code should work,

    #nav-topbar.nav-container {
    	background: #247db5;
    }
  21. noaneo
    Member
    Posted 10 months ago #

    hi,

    Beefstick said it all.

    You already have everything custom Appearance -> Theme Options -> Styling?
    Ago "Header Menu Background"

    This is a result of a mishap, I got used to not put the version in the child theme, with WP always asked me to update the parent theme.

  22. DGLauren
    Member
    Posted 10 months ago #

    @Beefstick: I tried adjusting the menu background color from the Theme Options > Styling section, as you and noaneo both suggested, but it doesn't change the color of the menu dropdown background color, which is what I was hoping for.

    The site has a white background. The active and hover links of the menu are now in black font and the inactive links are a similar blue to the blue in the header/logo image. That part looks right.

    When you mouse over the menu items and the blue font turns black, there is also a background color box that switches from white to grey. That is the background color I'd like to change. What is that called?

    I can open the site up publicly, if it would help, but I can't keep it open in the state the site's in. Just need to know someone is available and wants to see it.

    ~ * ~

    I'd also like to add that I have no expectations. It's a holiday weekend, and a Sunday, but since this work is way overdue, I've been working 7 days a week. If no one else is tied to their computer like I am right now, I totally understand!

  23. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    I'm sorry, you really should create your own thread to discuss this.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.