Style the New WordPress Menus

mimi · #1 Nov 20, 2011, 01:57 PM

This extra CSS will help you styling the new WordPress Menus aka "custom menus", most exactly, it fixes a problem highlighted below*.

1st go to > Appearance > Menus and create a Menu...

The great advantage of the new WordPress Menu is that you can have say; Menu 1 showing Pages AND Categories, Posts etc... You can mix and match and re-order via simple drag and drop, ALL showing in a single Bar/Menu! Amazing. I only discovered this by accident a couple of days ago, when I was seriously considering using a different theme and dropping Atahualpa for good.

To set up sub pages, simply drag the "child" below the parent slightly to the right (there are quite a few videos out there on the subject, showing you how to create and setup menus).

*Problem: if you use sub pages, and the parent is selected, the child/sub page(s) are also "visually" selected, in short, the original styling does not work anymore.

I Googled a lot, and spent some time trying different things, and I ended up with something that work with the theme.
For those interested, this post clearly explains the problem.

Here is the code to put in your Atahualpa theme's CSS Inserts:

Code:

/*----------WordPress Menu----------*/
#menu1 .current-menu-item li a:first-child { 
color: #your_color !important;
background: #your_color !important;
}
#menu1 .current-menu-item li a:hover { 
color: #your_color !important;
background: #your_color !important;
}
/*----------END----------*/

Change the "your_color" to match the colors you are using in your theme > Menu 1 (Page Menu).

I created this post for two reasons:

1) to help some of you, who might want to try the WordPress Menu, and most importantly, to avoid you the headache, especially when more experienced people are not willing to help. I am NOT a coder and will probably never be one, but at least I managed to come up with something that seems to be working.

2) hopefully, some of you who are more experienced with CSS, can improve the code and/or offer suggestions + valuable input. It would be a shame to not take advantage of this great built in feature; the WordPress Menus.

juggledad · #2 Nov 21, 2011, 05:15 AM

It's nice to see you trying to give to the community for a change. However, this code has some issues. If I add this to the CSS Inserts of a vanilla Atahualpa site

/*----------WordPress Menu----------*/
#menu1 .current-menu-item li a:first-child {
color: #00ffff !important;
background: #ff00ff !important;
}
#menu1 .current-menu-item li a:hover {
color: #ff00ffblue !important;
background: #00ffff !important;
}
/*----------END----------*/

and I have this structure

page-a
page-b
page-c
page-d
page-e
page-f
page-g
page-h

And I select page-a, it works, but when I select page-b I get a different set of hover colors (the defaults). If I select page-c, then pages d,e,and f are effected but the rest are have the default colors. This is a very odd looking menu.

So while this does affect the parent and it's children, it does not effect all the menu items which can cause teh menu to seem broken. You need to make sure the colors you pick agree with the colors that you have set in the Atahualpa pages and categories menu

mimi · #3 Nov 21, 2011, 08:16 PM

Quote:

Originally Posted by juggledad

It's nice to see you trying to give to the community for a change.

I am offended by your comment "for a change". I really feel insulted. It's not like I haven't donated.
Please read the following:

Donate $20 or more to become a Gold or Diamond member for additional benefits such as extra styles and tutorials and preferred attention from developers and moderators.

Your replies to me have been: google it, do a search and blah blah... you even deleted some of my posts, and now you are insulting me in public.

I know you have something against me, because I gave you the answer you deserved in our PM, and you didn't like to read the truth, and I am glad to make it public. you need to mature.
So please, stop getting personal and stop bullying me. I won't tolerate this anymore.
I'd rather not hear hear from you, then the silly: do a google search.

FYI, I am NOT a moderator NOR a developer or a coder, and that's why I am using this theme, so please respect me, and don't insinuate that I am a leech. I have given, please keep such comments for those who haven't and will never do.

I am going to contact Flynn right now.

Let's move on.

Quote:

Originally Posted by juggledad

However, this code has some issues. If I add this to the CSS Inserts of a vanilla Atahualpa site

/*----------WordPress Menu----------*/
#menu1 .current-menu-item li a:first-child {
color: #00ffff !important;
background: #ff00ff !important;
}
#menu1 .current-menu-item li a:hover {
color: #ff00ffblue !important;
background: #00ffff !important;
}
/*----------END----------*/

and I have this structure

page-a
page-b
page-c
page-d
page-e
page-f
page-g
page-h

And I select page-a, it works, but when I select page-b I get a different set of hover colors (the defaults). If I select page-c, then pages d,e,and f are effected but the rest are have the default colors. This is a very odd looking menu.

So while this does affect the parent and it's children, it does not effect all the menu items which can cause teh menu to seem broken. You need to make sure the colors you pick agree with the colors that you have set in the Atahualpa pages and categories menu

Well, that's where someone like you can come into play. I am not a coder.
I offered a solution to make it work with the first child, better then nothing, or "do a Google search".

Maybe try a:second-child or something...

juggledad · #4 Nov 22, 2011, 05:45 AM

sorry you don't value my support, I have returned your $20 donation.