Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 7, 2015 at 6:07 pm #55259
    David
    Participant

    1) I was interested in the CSS syntax to change the colors of the Custom Menu Widget when placed in the Header Right of the Evolution Pro theme.
    2) Would like to remove the vertical menu divider or border between menu items

    My website is: keepidahoclean.org

    I believe these need additional CSS. Using just the following didn’t work:
    .widget_nav_menu { color: somecolor; }
    .widget_nav_menu ul {
    .widget_nav_menu li {
    .widget_nav_menu a {
    .widget_nav_menu li:hover > a, .widget_nav_menu li.focus > a {

    Can you please provide the CSS for all of the above to work within the template.

    BTW: I have used other templates and can therefor appreciate how good yours are.

    Thank you…

    April 7, 2015 at 6:40 pm #55262
    Sakin
    Keymaster

    @David:

    1. For Custom menu widget color in Header Right sidebar, you can change the color code in the following css and add it in “Appearance => Theme Options => Custom CSS” box:

    .sidebar-top .widget_nav_menu {
    background: none #333;
}
.sidebar-top .widget_nav_menu ul.menu li:hover > a,
.sidebar-top .widget_nav_menu ul.menu a:focus {
	background: none #e5e5e5; 
	color: #373737;
}
.sidebar-top .widget_nav_menu ul.menu ul a {
	background: none #f9f9f9;
	border-bottom: 1px dotted #ccc;
	color: #444;
}
.sidebar-top .widget_nav_menu ul.menu li:hover > a,
.sidebar-top .widget_nav_menu ul.menu ul :hover > a,
.sidebar-top .widget_nav_menu ul.menu a:focus {
	background: none #efefef;
}

    2. To remove the border right, you can simply add the following css in “Appearance => Theme Options => Custom CSS” box:

    .sidebar-top .widget_nav_menu ul.menu li {
    border-right: none;
}

    Thanks for your appreciation 🙂

    April 7, 2015 at 7:04 pm #55265
    David
    Participant

    I appreciate the super fast response. But that didn’t didn’t affect a color change.

    I tried !important after the color and that didn’t change the color either.

    By using firebug, I can change .widget_nav_menu using the following:
    #header-menu ul.menu a, .sidebar-top .widget_nav_menu ul.menu a, #colophon #access-footer ul.menu a {
    color: #006633;
    background-color: #ffffff;
    }

    But that seems extraneous. And I don’t know what the other menu elements syntax would look like.

    Thank you sir…

    April 7, 2015 at 7:06 pm #55266
    David
    Participant

    My mistake, your code works…

    You were using the default colors in your example.

    April 7, 2015 at 7:11 pm #55268
    Sakin
    Keymaster

    @David: Yes, I am using default color as you haven’t send me the color code. Also I have mentioned that you can change the color code.

    April 7, 2015 at 7:28 pm #55271
    David
    Participant

    Using the below didn’t change the text font color (still remained grey) or positioning of the menu (right justified):
    .sidebar-top .widget_nav_menu {
    color: #006633;
    background: none #ffffff;
    line-height: 2em;
    padding: 0 0 0 2em;
    }

    But using the below made the changes that I was looking for:
    #header-menu ul.menu a, .sidebar-top .widget_nav_menu ul.menu a, #colophon #access-footer ul.menu a {
    color: #006633;
    background: none #ffffff;
    line-height: 2em;
    padding: 0 0 0 2em;
    }

    For other future readers, was there a different way to affect these changes?

    April 7, 2015 at 11:00 pm #55291
    Sakin
    Keymaster

    @David: Sorry I don’t get it what you mean here by
    For other future readers, was there a different way to affect these changes?

    April 8, 2015 at 6:00 am #55324
    David
    Participant

    Only that the more answers you reply to the bigger the knowledge base gets. I myself looked at previous Q&A’s before I submitted my question. All of your answers benefit future readers.

    I was just wondering if you thought that there was simpler code than this:
    #header-menu ul.menu a, .sidebar-top .widget_nav_menu ul.menu a, #colophon #access-footer ul.menu a {

    I appreciate what you do.

    April 8, 2015 at 9:31 am #55330
    Sakin
    Keymaster

    @David: Since you are using widget menu in your header right sidebar, you can replace your
    #header-menu ul.menu a, .sidebar-top .widget_nav_menu ul.menu a, #colophon #access-footer ul.menu a { }

    With the following:
    .sidebar-top .widget_nav_menu ul.menu a { }

    April 8, 2015 at 7:16 pm #55342
    David
    Participant

    Sakin, In your above reply, this code:
    .sidebar-top .widget_nav_menu ul.menu a { }

    Didn’t work. It turned the menu back to the system defaults. It didn’t apply any of the listed color changes.

    Just wanted you to know.

    I do have a solution that works using that long string of code.

    You can consider this thread closed.

    April 9, 2015 at 10:46 am #55385
    Sakin
    Keymaster

    @David: It should work as I just check in your site and it’s working. You can add in and let me know it. You need to refresh your browser after you make the changes.

    April 11, 2015 at 12:51 am #55508
    David
    Participant

    Sakin,

    I’m happy with colors and position of the custom menu in the header right. Above that widget I have the Social and Search Widget. When I click on the search magnifying icon the search box expands and pushes the menu items to the left and leaves a dark grey space to the right of the menu. Is there any way to prevent this behavior and keep the menu is the same position? So that the menu stays right justified?

    Thanks…

    April 11, 2015 at 8:34 am #55540
    Sakin
    Keymaster

    @David: Add the following css in “Appearance => Theme Options => Custom CSS” box:

    #sidebar-header-right.sidebar-top .widget_nav_menu {
    width: auto;
}
    April 11, 2015 at 9:51 am #55547
    David
    Participant

    That worked like a charm…

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Custom Menu Widget Colors in Header Right’ is closed to new replies.