Customizing Each Menu Item in WordPress

Question

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color.

Specifically, I envision the following structure:

- <ul id="main-menu" class="menu">
    <li id="1">This is Red
        <ul>
        <li id="4">Background Red</li> 
        </ul> 
    </li>
    <li id="2">This is Blue
        <ul>
        <li id="5">Background Blue</li> 
        </ul> 
    </li>
    <li id="3">This is Green
        <ul>
        <li id="6">Background Green</li> 
        </ul> 
    </li>
- </ul>

While I was able to achieve this design on the homepage, I have encountered issues with replicating it across other pages. It seems that the styling does not appear as intended on these pages.

The CSS styling involving lists with '>' in them still poses a challenge for me, as I find it somewhat perplexing.

If anyone could recommend a helpful tutorial or provide guidance on how to accomplish this, I would greatly appreciate your assistance.

css wordpress menu

Answer 1

Answer №1

An identifier cannot begin with a number, so make sure to modify it if you are currently using one. If changing it is not an option, you can use [id='1'] {/* some css */}

The HTML

<ul class="menu">
    <li id="first">This is Red
        <ul>
            <li>Background Red</li> 
        </ul> 
    </li>
    <li id="second">This is Blue
        <ul>
            <li>Background Blue</li> 
        </ul> 
    </li>
    <li id="third">This is Green
        <ul>
            <li>Background Green</li> 
        </ul> 
    </li>
</ul>

The CSS

#first {
    color: red;
}
    #first ul > * {
        background-color: red;
        color: white;
    }
#second {
    color: blue;
}
    #second ul > * {
        background-color: blue;
        color: white;
    }
#third {
    color: green;
}
    #third ul > * {
        background-color: green;
        color: white;
    }

See it in action here http://jsfiddle.net/9mD8z/

We hope this solution resolves your issue.

Answer 2

An identifier cannot begin with a number, so make sure to modify it if you are currently using one. If changing it is not an option, you can use [id='1'] {/* some css */}

The HTML

<ul class="menu">
    <li id="first">This is Red
        <ul>
            <li>Background Red</li> 
        </ul> 
    </li>
    <li id="second">This is Blue
        <ul>
            <li>Background Blue</li> 
        </ul> 
    </li>
    <li id="third">This is Green
        <ul>
            <li>Background Green</li> 
        </ul> 
    </li>
</ul>

The CSS

#first {
    color: red;
}
    #first ul > * {
        background-color: red;
        color: white;
    }
#second {
    color: blue;
}
    #second ul > * {
        background-color: blue;
        color: white;
    }
#third {
    color: green;
}
    #third ul > * {
        background-color: green;
        color: white;
    }

See it in action here http://jsfiddle.net/9mD8z/

We hope this solution resolves your issue.

Answer 3

Answer №2

Recently, I discovered the solution to this query:) @ To customize the appearance of menus, navigate to Appearance > Menus and click on: Screen Options! Next, ensure that (CSS Classes) is checked under: Show advanced menu properties This will unveil a new field named CSS Classes for each item! You can now easily target the classes you have allocated in your stylesheet.

Best regards, A Helpful Guest!

Answer 4

Recently, I discovered the solution to this query:) @ To customize the appearance of menus, navigate to Appearance > Menus and click on: Screen Options! Next, ensure that (CSS Classes) is checked under: Show advanced menu properties This will unveil a new field named CSS Classes for each item! You can now easily target the classes you have allocated in your stylesheet.

Best regards, A Helpful Guest!

Answer 5

Answer №3

After some trial and error, I've discovered the specific styling that works best for my needs:

.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}

So far, this solution is effective for me although there may be room for improvement on the color selection. If anyone has suggestions for enhancing this further, please share them with me :)

Please note that these styles are specific to one of the menu items as the IDs for other menu items will vary.

Answer 6

After some trial and error, I've discovered the specific styling that works best for my needs:

.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}

So far, this solution is effective for me although there may be room for improvement on the color selection. If anyone has suggestions for enhancing this further, please share them with me :)

Please note that these styles are specific to one of the menu items as the IDs for other menu items will vary.

Customizing Each Menu Item in WordPress

Answer №1

Answer №2

Answer №3

Similar questions

The issue with WordPress multisite is the absence of the wp_options table

Generate individual CSS files using postcss and rollup

Enhancing Label and Input Elements with Dynamic CSS through jQuery Values

Is there a way to develop a login form that retrieves information from a Google Sheet database?

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Excessive content within the div element causing overflow

Initiate an animation upon reaching a designated element using Jquery scroll event

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

The Calibri Light font is not supported by Chrome version 37

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

What is the best way to activate the cube portfolio using custom jquery?

The exclusion of IDs from the WordPress search query is not functioning as expected when using post__not

Injecting SVG styling into HTML using the content tag and CSS

Drop and drag the spotlight

JS How can I generate individual buttons in a loop that trigger separate actions?

Issue with fixed positioning not behaving as intended while scrolling downwards

Can JQuery's 'unslider' be customized to only change the backgrounds?

Retrieve the first menu item from a page menu based on the page ID through Wordpress