WordPress.org

Support

Support » Themes and Templates » [Theme: Twenty Eleven] How to change navigation background

[Theme: Twenty Eleven] How to change navigation background

Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi
    Forum Moderator

    @esmi

    I would strongly advice against editing the Twenty Eleven theme as it is the default WordPress 3.2 theme. Having access to an unedited version of the default theme is sometimes vital when troubleshooting a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

    Thanks esmi.But I also need know how to change………

    esmi
    Forum Moderator

    @esmi

    Once your child theme is active, we should be able to help with the customisation.

    fairfaxflora
    Member

    @fairfaxflora

    I’ve created a child theme, and I’m also looking to see how to do this change. Can you help? My site isn’t published yet.

    Michael
    Forum Moderator

    @alchymyth

    everything to do with the navigation is in style.css, starting with:

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #222; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#252525, #0a0a0a);
    ...
    ...

    copy the section into style.css of your child theme and change the background colors.

    mb studio services
    Member

    @mb-studio-services

    I dropped this code into my twentyeleven child theme and it didn’t change the navigation background colors.

    Mike

    /* =Menu
    ————————————————————– */

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);

    Hi Mike,
    Did you change the colors from the defaults?

    Test with this block as you likely did not get all the styles, this will give you an orange menu.

    /* Menu Background */
    #access  {
    	background: #A72608; /* Tertiary to Primary */
    	background: -moz-linear-gradient(#DB7C2A, #A72608);
    	background: -o-linear-gradient(#DB7C2A, #A72608);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DB7C2A), to(#A72608)); /* older webkit syntax */
    	background: -webkit-linear-gradient(#DB7C2A, #A72608);
    }

    If you want to control more colors then I have a twenty eleven color master child theme, this will give you control over all main colors, and it will generate the styles so you can copy them to your other child theme.

    Regards

    David

    mb studio services
    Member

    @mb-studio-services

    The menu works in the default but when I used the dark template it didn’t. Is there a way around this ?

    Mike

    Hi Mike,
    The problem with the dark template is that the style is loaded after the child themes stylesheet.

    There are two ways:
    Option 1
    Use !important this will stop the style being changed:

    /* Menu Background */
    #access  {
    	background: #A72608 !important; /* Tertiary to Primary */
    	background: -moz-linear-gradient(#DB7C2A, #A72608) !important;
    	background: -o-linear-gradient(#DB7C2A, #A72608) !important;
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DB7C2A), to(#A72608)) !important; /* older webkit syntax */
    	background: -webkit-linear-gradient(#DB7C2A, #A72608) !important;
    }

    Option 2
    Create a second stylesheet in the child theme and load this in functions.php, this is the way I would suggest is the better option.

    I wrote a post on how to do this with the code, and a download for registered members.

    HTH

    David

    niceWP
    Member

    @nicewordpress

    alchymyth, thank you so much! it worked perfectly for me!

    I just copied and pasted into my child style.css sheet the code you provided and then changed the colors names to my liking. Now i am liking it so much better 🙂

    I appreciate your help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Theme: Twenty Eleven] How to change navigation background’ is closed to new replies.