Sundance Theme: Edit Menu Colour / Size

  • Unknown's avatar
    commpletesecurity · Member ·

    Hi there,

    Wonder if anyone could help me with the css sheet for my blog please. I have a basic understand of HTML & CSS and in the past used Notepad ++ for designing sites. I have now started a wordpress site but finding it hard to discover what the CSS attributes are associated to, so amendments can be made to the styles. I have downloaded the theme but still unable to work out what must be edited. I have also used the ‘Firebug’ application in attempt to find what must be amended but no prevail.

    I would like to amend the style of the Menu within the Sundance Theme but unable to determine what attribute must be edited to do so.

    Basically would like the menu to be:

    the same size as the Header.
    Background color: #1b1464;
    Text Colour: #ffffff;
    text-align: centre;

    Hover over to be:
    Background color: #1b1464;
    Text Colour: #ffffff;
    text-align: centre;

    I would also like each Menu header to be split with the symbol | .

    If anyone could please point me in the right direction to making these edits that would be great and much appreciated!

    My URL is: http://www.comm-pleteSecurity.com

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    Basically would like the menu to be:
    the same size as the Header.

    I’m not sure I understand what you are wanting there. When you say “header” are you talking about the page title (About) in the content area?

    To make the background of the menu 1b1464, add the following CSS.

    .main-navigation {
    height: 26px;
    width: 100%;
    background: #1b1464;
}

    On the hover color for the text, I see you have it set to #FF6600 right now in your custom CSS (the same as the current menu item). If you want the non-current menu items white on hover, then remove the following

    .main-navigation a:hover,

    from this selector

    .main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a

    I see you have called a text align center. Are you wanting the menu items centered in the navigation bar? If so, then you can add the following CSS.

    .main-navigation {
    text-align: center;
}
.main-navigation ul {
    display: inline-block;
}

    Do note that the menu will revert to left alignment if you add enough menu items to make the menu go to two lines.

    To add a | between the menu items, add the following CSS. The first rule adds the | to all menu items and then the second removed it from the dropdown menu.

    .main-navigation ul li a:after {
    content: "|";
    margin-left: 25px;
    color: #FFFFFF;
}
.main-navigation ul ul li a:after {
    content: "";
}
  • Unknown's avatar
    commpletesecurity · Member ·

    Thanks for your help!!!

    With regards to the ‘header’ section, i forgot to revert the blog back after attempting amending the CSS myself prior to my post.

    If you could help fine tune some more that would be appreciated!

    I have now inserted your code but i would like the menu to be the width of the page and inline with the header, currently it goes off the page on the right hand side. I have attempted to use ‘float: left’ to adjust the location of the menu but it didnt work. I would also like the menu to be moved up so that it is directly underneath the header logo.

    To enable the Menu text to be white i have used:

    a:link {
    color:#ffffff;
    }

    The main issue i can see with this is that any links i create in my text would also be white, but i am assuming i could directly change the colour using HTML within the text editor. Do you know of another method which this could be done? I tried to just enter a colour within the ‘.main-navigation’ section but the amendment didnt work, i assumed that this is since the text is hyper text not normal text.

    Thanks

  • kathrynwp · Staff ·

    I have now inserted your code but i would like the menu to be the width of the page and inline with the header, currently it goes off the page on the right hand side. I have attempted to use ‘float: left’ to adjust the location of the menu but it didnt work. I would also like the menu to be moved up so that it is directly underneath the header logo.

    Try replacing the first code chunk in your custom CSS with this: 

    .main-navigation {
     background: none repeat scroll 0% 0% #FFFFFF;
     height: 26px;
     margin: -27px 0 0 0;
     max-width: 100%;
     text-align: center;
}
.main-navigation ul {
     display: inline-block;
}

    That should make things look like this:

    If you don’t want the menu centered, you can remove this:

    .main-navigation ul {
     display: inline-block;
}

    as well as this line: 

    text-align: center;
  • kathrynwp · Staff ·

    To enable the Menu text to be white i have used:

    I just noticed in your original post that you wanted the menubar to be purple (1b1464) with white text. Try changing this line in the code I just gave you:

    background: none repeat scroll 0% 0% #FFFFFF;

    to this: 

    background: none repeat scroll 0% 0% #1b1464;

    To make the menu links white, add this new code:

    .site-navigation ul li a {
     color: #ffffff;
}
.main-navigation a:hover, .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
    color: #ffffff;
}
  • Unknown's avatar
    commpletesecurity · Member ·

    That is great thanks, the menu is just how I wanted it.

    Thanks for your help it has been greatly appreciated!!

  • kathrynwp · Staff ·

    Great, glad to hear it! You’re very welcome.

  • The topic ‘Sundance Theme: Edit Menu Colour / Size’ is closed to new replies.