WordPress.org

Ready to get started?Download WordPress

Forums

Menu Trouble Twenty Eleven Child Theme (9 posts)

  1. pkelly94
    Member
    Posted 1 year ago #

    I just updated to the new wordpress and the menus on my website got a bit messed up. My website is here: http://theup-turn.com/

    Before the background had been white, the same color as the body background, and I'm not sure what coding I need to change to get it back.

    Here is all my #access code for my Twenty Eleven Child Theme

    #access {
    	background: #FFFFFF; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#FFFFFF, #FFFFFF);
    	font-size: 12px;
    	border-top: 2px solid #69c;
    	border-bottom: 2px solid #69c;
    	width: 1000px;
    }
    
    #access a {
    	color: #FFFFFF;
    	font-size: 13px;
    	margin-left: 5px;
    }
    
    #access li:hover > a,#access a:focus {
    	text-decoration: underline;
    	font-size: 13px;
    	color: black;
    }
    
    #access .current_page_item > a,#access .current_page_ancestor > a {
    	font-size: 13px;
    	color: black;
    	text-decoration: underline;
    }

    Anyone know how I can fix this?

    -PK

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    Go to Dashboard > Appearance > Background and set it to white.

  3. afzaal1985
    Member
    Posted 1 year ago #

    Hi friend,

    I'm a little confused. What exactly did your site color scheme look like before?

    Try changing the above code to the following and see if it's the look you want:

    #access {
    background: #f1f1f1;
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5)
    font-size: 12px;
    border-top: 2px solid #69c;
    border-bottom: 2px solid #69c;
    width: 1000px;
    }

    #access a {
    color: #69c;
    font-size: 13px;
    margin-left: 5px;
    }

    #access li:hover > a,#access a:focus {
    text-decoration: underline;
    font-size: 13px;
    color: black;
    }

    #access .current_page_item > a,#access .current_page_ancestor > a {
    font-size: 13px;
    color: black;
    text-decoration: underline;
    }

    Let me know if this is the look you want then I can help you tidy up the code a little more if you want.

    Afzaal

  4. pkelly94
    Member
    Posted 1 year ago #

    Afzaal,

    I copied your code directly into the code and still nothing has changed. Before my theme just had a white background with no gradient so that the menu looked just like the text on any other part of the website. Could this have something to do with the new "menus" widget that is in wordpress?

    -PK

  5. pkelly94
    Member
    Posted 1 year ago #

    I don't want any gradients when I hover over the links. For some reason I can't get it to be black text with a white background.

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    Override this in your child's style.css

    #access li:hover > a, #access a:focus {background: white;}
  7. pkelly94
    Member
    Posted 1 year ago #

    Awesome that got rid of the gradient! Still can't get the font to be black.

    #access {
            background: #ffffff;
            background: -webkit-linear-gradient(#ffffff, #ffffff)
    	color: black;
            font-size: 13px;
            border-top: 2px solid #69c;
            border-bottom: 2px solid #69c;
            width: 1000px;
    }
    #access a {
    	background: #f1f1f1
            color: black;
            font-size: 13px;
            margin-left: 5px;
    }
    #access li:hover > a, #access a:focus {
    	background: white;
            text-decoration: underline;
            font-size: 15px;
            color: black;
    }
    #access .current_page_item > a, #access .current_page_ancestor > a {
    	background: white;
            font-size: 15px;
            color: black;
            text-decoration: underline;
    }

    Seems like it should be an easy fix

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    Seems like it should be an easy fix

    Yes, everybody keeps saying that in the web industry.

  9. afzaal1985
    Member
    Posted 1 year ago #

    Hi PK,

    I've removed the background gradient color from "#access" and from "#access a". Replace the code above in your comment with that below:

    #access {
            background: #ffffff;
    	color: black;
            font-size: 13px;
            border-top: 2px solid #69c;
            border-bottom: 2px solid #69c;
            width: 1000px;
    }
    #access a {
            color: black;
            font-size: 13px;
            margin-left: 5px;
    }
    #access li:hover > a, #access a:focus {
    	background: white;
            text-decoration: underline;
            font-size: 15px;
            color: black;
    }
    #access .current_page_item > a, #access .current_page_ancestor > a {
    	background: white;
            font-size: 15px;
            color: black;
            text-decoration: underline;
    }

    This should do the trick. Also, just a tip the reason why the font color wasn't showing as black previously was because you missed a comma after the background color so the css didn't pick up the font color correctly.

    Hope this helps!

    Afzaal

Topic Closed

This topic has been closed to new replies.

About this Topic