WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] HELP - Custom theme, with different menu colors (11 posts)

  1. dwtbc
    Member
    Posted 1 year ago #

    Hello

    I would like to know if the navigation on this page: http://www.coachingcreative.dk,

    is possible to do in wordpress?

    I have converted the site to a wp-theme, but I can't get the navigation to work as I want to.

    I have made custom menues which works fine, but I can't get the CSS-classes to work on these.

    Daniel

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Certainly possible, but as to the specifics, it depends on your theme/site. If you post a link to it, someone can likely help you more specifically.

  3. dwtbc
    Member
    Posted 1 year ago #

    Here is the link to the wordpress site as it is for now.
    http://www.danieldoktor.dk/daniel/

    How would you go about making the bottom border and submenus in different colors?

    Daniel

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you look at each menu item HTML code, there is a unique id -- for example this for the first one on your page:
    <li id="menu-item-42" ...

    You can use that id to target the CSS code specifically to that item:

    .menu li#menu-item-42 {
        border-bottom: 4px solid #C92127;
    }

    Same concept for the drop down background colors.

  5. dwtbc
    Member
    Posted 1 year ago #

    Thank you for answering so fast!

    I have tried somthing like, but maybe it wasn't called correct.

    What about the submenus, how would you call them?

    Daniel

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try this:

    .menu li#menu-item-39 ul {
        background: none repeat scroll 0 0 #XXXXXX;
    }

    Obviously, you'll need to change the menu item numbers/color for each drop-down.

  7. dwtbc
    Member
    Posted 1 year ago #

    God dammit! :)

    It worked on the borders!!!!

    Thank so much!!!
    I will try the css you posted on the submenu.

    Initially I was thinking of doing it like this:

    .menu li#menu-item-39.sub-menu {
    	background: #00AEEF;
    }

    would that work?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, because the .submenu class is assigned to the ul element:

    <ul class="sub-menu" ...

    so in the CSS, it would need to be:

    ul.sub-menu

    So it would need to be:

    .menu li#menu-item-39 ul.sub-menu {
    	background: #00AEEF;
    }
  9. dwtbc
    Member
    Posted 1 year ago #

    Okay thank you!!

    You were a great help, and it is working now.

    I have spend 4 hours on this, so you made my day!

    Thank you again

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You're welcome -- glad to. And it looks great, BTW.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Good work Dwtbc and WPyogi ☺

Topic Closed

This topic has been closed to new replies.

About this Topic