how to change color of the navigation box

  • ivana2201

    (@ivana2201)


    8 years, 3 months ago

    Hi,
    I would like to change color on navigation box but I do not know how to do it.
    I try with:

    .main-navigation ul ul a:hover {
background: #ccc49b;
color: #ccc49b;
}
.main-navigation {
display: inline-block;
background: #E6E1C4;
border: solid 3px #8486ff;
clear: both;
margin: auto;
margin-bottom: 20px;
height: auto;
text-align: left;
}

    I changed the color of the navigation box and it was ok but when you click on, for example , contact page displays the old color.
    Can anyone help me?
    Thank you

Viewing 7 replies - 1 through 7 (of 7 total)
  • Madhusudan Pokharel

    (@madhusudan977)

    8 years, 2 months ago

    Hello,
    Your css is working fine for me on all pages.
    See: http://prntscr.com/9rzmrw
    First, Make back up of your theme folder.
    Try consider reuploading the theme again.
    To completely delete and upload the same theme follow Following Steps:
    1.Click on Appearance » Themes>> Activate other theme than Sixteen.
    2.Again,Click on Appearance » Themes>> Hover the Mouse over Active theme>> Click the “Theme Details” button.
    3.Click Next Arrow button on the top left side of theme until you find Sixteen. Click Delete button
    4.Go to Appearance » Themes>> Add New >>Upload Sixteen. Activate the theme.

    Now, Place your custom css inside box using plugins https://wordpress.org/plugins/wp-add-custom-css/

    Now you should be able to see the css effect.

    Thanks!!

    Thread Starter ivana2201

    (@ivana2201)

    8 years, 2 months ago

    Hi,
    Thank you for reply,

    See: http://i.imgur.com/HZ3kJho.gifv
    Now is fine but when I move my mouse on navigation box or click on second page the color is black, how do I change this color?

    Thank you

    Madhusudan Pokharel

    (@madhusudan977)

    8 years, 2 months ago

    Hello,
    You need to adjust following lines of code in Custom CSS.

    .main-navigation ul ul a:hover {
background: #ccc49b;
color: #ccc49b;
}

    Try to make changes to background and color to different color combinations replacing above colors until you achieve something attractive.
    Play with the different color change of Enter the color from this link:
    http://www.w3schools.com/tags/ref_colorpicker.asp

    Thread Starter ivana2201

    (@ivana2201)

    8 years, 2 months ago

    Hi,
    Thank you for reply,

    When I change color on the code in Custom CSS, color is the same, as if I had not change the color.
    Am I doing something wrong? I change this code in plugin Custom CSS.

    Thank you very much for help.

    Madhusudan Pokharel

    (@madhusudan977)

    8 years, 2 months ago

    Hello,
    Here is what you need to do:
    1. Deactivate the plugin Custom CSS
    2. Go to Appearance -> Sixteen Settings -> Layout Settings -> Custom CSS -> Write your CSS Code inside the box -> Save Options

    .main-navigation ul  a:hover {
background: green;
color: orange;
}

    This should change color in your site.

    Thread Starter ivana2201

    (@ivana2201)

    8 years, 2 months ago

    Hello,
    Thank you for reply,
    I did what you told me to do,
    1.I deactivated the plugin
    2.I put the CSS code in the Sixteen Settings -> Layout Settings -> Custom CSS
    I change the color,

    .main-navigation ul  a:hover {
background: white;
color: brown;
}

    “Save Options” and I get this:
    http://i.imgur.com/QHfUnR3.gifv
    If you can see my background is still black.
    Thank you

    Madhusudan Pokharel

    (@madhusudan977)

    8 years, 2 months ago

    The background is still black because your site is designed in flash video and not in CSS. So you aren’t being able to change the CSS.
    You have to be contained with how your site is designed or use flash to change the colors.
    If you don’t want to show flash videos, use original Sixteen theme and apply the CSS I provided above.
    Reply me back if you have any problem doing either changes.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘how to change color of the navigation box’ is closed to new replies.