WordPress.org

Forums

Spun
[resolved] Make the Menu bar wording darker (19 posts)

  1. chewhow
    Member
    Posted 1 year ago #

    May I know where is the code to change the Menu bar wording to a darker color?

    Now it is very light grey and on certain browser like Firefox, it is almost invisible.

    I need the font color to be darker before mouse over.

    http://www.chewhow.com
    --> the Menu bar on the top right.

    Thanks in advance.

  2. Hey. Firstly, you would need to create a child theme or install a custom CSS plugin. In your child theme's style.css file or custom CSS plugin's editor, you would need to use the following CSS snippet:

    .main-navigation a {
    color: COLOURVALUE;
    }

    COLOURVALUE should be replaced by the hex colour code that corresponds to the colour you wish the text in your menu to be. A listing of hex colour codes can be found here: http://html-color-codes.com/.

  3. chewhow
    Member
    Posted 1 year ago #

    I tried this, see below. But doesn't seem to be working.

    /* =Imports styles from the parent theme
    -------------------------------------------------------------- */
    @import url('../spun/style.css');

    /* =Theme customization starts here
    -------------------------------------------------------------- */

    .main-navigation a {
    color: #666666;
    }

  4. Sorry, just realised that this is being caused by the low opacity value being set in the CSS. The snippet you'll need to override this is:

    #masthead {
    opacity: 1;
    }

    You'll then be able to change the colour for .main-navigation as you wish.

  5. chewhow
    Member
    Posted 1 year ago #

    Sorry I don't really get what you means yet.
    There are 3 parts in the main-navigation that I can change the color code.
    May I know which part is the default setting (once loading), and which part is the color setting once mouse hover over?

    Really appreciate your kind support.

    PART 1
    ------
    .main-navigation {
    color: #999;
    display: block;
    float: right;
    font-family: Quicksand, Helvetica, Arial, sans-serif;
    -webkit-text-stroke: .35px; /* Hack to fix thin text in Windows */
    font-size: 14px;
    font-size: 1.4rem;
    margin: 5px 0 0;
    position: relative;
    text-align: right;
    text-transform: uppercase;
    width: 60%;
    }

    PART 2
    ------
    .main-navigation a {
    color: #999;
    display: block;
    text-decoration: none;
    }

    PART 3
    ------
    .main-navigation ul ul .parent > a:after {
    color: #999;
    content: " ยป ";
    display: inline-block;
    margin: 0 0 0 .5em;
    }

  6. Strizzle
    Member
    Posted 1 year ago #

    Chewhow:

    I understand your frustration, as I was having the same problem viewing the text through firefox etc, as it was too light.

    The color of the text is not the problem, it is actually a dark grey at it's source.

    The opacity of the text is the problem. It causes the dark grey text to become very light.

    Follow Siobhan's advice posted above, and in your css plugin add the lines:

    #masthead {
    opacity: 1;
    }

    The opacity range is between 0 and 1. Set it to 1 and it will be a regular string of text with a dark grey color. You can also follow the above advice to change the color if you wish, but I believe the opacity is the source of your frustration. Anywhere in the CSS code you have an opacity you can set it to 1 and it will solve your problem.

    I understand the theme creator having a opacity set like it is, but for some of our pages that element just goes too far. Good luck!

  7. chewhow
    Member
    Posted 1 year ago #

    Hi Strizzle

    Thanks for the reply.
    I miss out to talk about the header in my earlier reply.

    Actually I have changed the Header opacity using advice from Siobhan below. It improved, as you can see on my header (top-left).

    #masthead {
    opacity: 1;
    }

    But somehow, the Menu bar (top-right) opacity is not affected by this #masthead.
    Therefore, I am looking into the .main-navigation.
    I tried to change the color code. Doesn't seem to help.
    Most likely I am not changing the correct part of the codes.

    May be you can help on this :D

  8. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Btw I was going to help but right click was disabled

  9. chewhow
    Member
    Posted 1 year ago #

    Hi Andrew

    opsss, here you go, try again.
    http://www.chewhow.com

  10. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    I can't see this:

    #masthead {
    opacity: 1;
    }

    In your Child Theme style.css file

  11. chewhow
    Member
    Posted 1 year ago #

    Hi Andrew

    I am not sure how the css should appear.
    Even the original template source file, I can't see the opacity setting.

    view-source:http://spun-demo.calobeedoodles.com/

    You can view the css file here:
    http://www.chewhow.com/wp-content/themes/spun-child/style.css

  12. Strizzle
    Member
    Posted 1 year ago #

    Hello Chewhow,

    Be advised I am still a newbie at CSS as well. However, I checked your child theme style.css you linked above and I do see the masthead opacity has been changed to 1.

    If you search the .main-navigation area, I see another opacity value set to 0. I'm not sure if this is the value you should change, I suspect it is, but I would alter this section to have the opacity set to 1 like below:

    .main-navigation ul ul {
    	float: left;
    	opacity: 1;
    	position: absolute;
    		top: 1.6em;
    		left: 0;
    	text-align: left;
    	transition: all .4s ease-in-out;
    	-webkit-transition: all .4s ease-in-out;
    	-moz-transition: all .4s ease-in-out;
    	-o-transition: all .4s ease-in-out;
    	visibility: hidden;
    	z-index: 99999;
    }

    I would be interested to see if this fixes your issue.

    By the way your site looks fine and does not have the light color text when I view it currently, although I'm sure I'm on a different browser/system than you.

  13. chewhow
    Member
    Posted 1 year ago #

    i am using firefox n chrome.

    tried your suggestion, still the same :(

  14. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Try clearing your cache.

  15. chewhow
    Member
    Posted 1 year ago #

    Well, may be I was wrong. The Menu bar font color opacity did change but in minor scale due to its FONT.

    I increased code below to a higher number and it seems clearer now:

    -webkit-text-stroke: .75px;

    :D

  16. usiranrels
    Member
    Posted 1 year ago #

    Hello,

    I read this thread with great interest because I just built a site with Spun and I, too, want to change the opacity value. However, when I try to access my theme directory to create a child theme, I get a blank screen. No error message, mind you -- just a blank page. I am entering http://us-iran-relations.com/wordpress/wp-content/themes/ The instructions seemed straight-forward enough. Alas...could someone involved in this thread please help me get started? Thank you!

  17. usiranrels
    Member
    Posted 1 year ago #

    OK, I just figured out that I probably need to download WP to my hard drive to create a child theme...I built the site and chose the theme entirely on the web. Is my hunch correct?

  18. WPyogi
    Forum Moderator
    Posted 1 year ago #

    @usiranrels - please start a new thread for this child theme topic.

  19. usiranrels
    Member
    Posted 1 year ago #

    ok

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic