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

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Creating a flexible Tic Tac Toe board using only HTML and CSS without any JavaScript

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

Chrome not displaying transition effects after the page has finished loading

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

Font Awesome icons occasionally display as squares, but typically they render correctly

iPhone 5 Internet Browser - charcoal matte .png with transparent background

My div won't stay fixed in the layout no matter what I try

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

Text in SVG file misaligned at the edge

Is there a way to display multiple Bootstrap 5 modals simultaneously without automatically closing the previous ones?

What is the process of setting up a WordPress multisite on a local server?

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

Ways to decrease font size and insert a line break within a constrained input space?

What are the steps to repairing the footer on your website?

The getJSON API functions properly on a local machine but encounters issues when deployed on a

attempting to display an element using jQuery that belongs to the identical class