Editing CSS menu buttons
Permalink
Hi there,
I'm using the theme called Greek_Yogurt and I want to personalize it more.
I have changed many things but I'm stuck with the menu buttons.
The thing is: if I want to change the color in the border of the active button I just need to write somewhere this line: border: solid 1px black; Correct? Well... It doesn't work! It only shows the border in the bottom of it.
My code:
ul li a.nav-path-selected {
background-color: #f1c232;
}
ul li.nav-selected {
font-weight: bold;
}
It doesn't work putting the code for the border (border: solid 1px black;) in any of those bits or in both.
Any ideas?
Thanks
I'm using the theme called Greek_Yogurt and I want to personalize it more.
I have changed many things but I'm stuck with the menu buttons.
The thing is: if I want to change the color in the border of the active button I just need to write somewhere this line: border: solid 1px black; Correct? Well... It doesn't work! It only shows the border in the bottom of it.
My code:
ul li a.nav-path-selected {
background-color: #f1c232;
}
ul li.nav-selected {
font-weight: bold;
}
It doesn't work putting the code for the border (border: solid 1px black;) in any of those bits or in both.
Any ideas?
Thanks
Thank you for your answer.
If I put it in nav-selected the border appears behind the background and in a smaller size. I think it only affects the text. (please find a screenshot attached)
If I put it in nav-path-selected it works, but only in the bottom (???)
I just don't get it :(
If I put it in nav-selected the border appears behind the background and in a smaller size. I think it only affects the text. (please find a screenshot attached)
If I put it in nav-path-selected it works, but only in the bottom (???)
I just don't get it :(
Oh, I get it.
Could you PM me a link, please?
Could you PM me a link, please?
Ok, got your PM.
Open up your typography.css.
Around line 41, you will find:
Change it to:
Just add a comma and then the "ul li a.nav-selected" selector. That should do it.
Open up your typography.css.
Around line 41, you will find:
div#main-container #header ul li a:hoverChange it to:
div#main-container #header ul li a:hover, ul li a.nav-selectedJust add a comma and then the "ul li a.nav-selected" selector. That should do it.
No changes :(
Okay then, try:
This will work.
div#main-container #header ul li a.nav-selectedThis will work.
It worked!! You are a star!
Thanks a lot. :)
Does exist something to block the hover propierties when the mouse is over the active/selected one?
That last detail would be awesome
Thanks a lot. :)
Does exist something to block the hover propierties when the mouse is over the active/selected one?
That last detail would be awesome
Sure, just delete any :hover selectors, such as div#main-container #header ul li a:hover.
Don't forget to backup your file before that.
Don't forget to backup your file before that.
That would affect everything, wouldn't it?
I just wanted to have the normal hover propierties but only in the not-active ones... I mean, if you put the mouse over the active one there's a link to itself, and that shouldn't be there. But don't worry, you've already saved me and it's fine like it is :)
I just wanted to have the normal hover propierties but only in the not-active ones... I mean, if you put the mouse over the active one there's a link to itself, and that shouldn't be there. But don't worry, you've already saved me and it's fine like it is :)
Not sure what exactly you are trying to achieve.
You're trying to remove the link property from the active element?
That's more complicated and I'd strongly advise you against doing it.
You're trying to remove the link property from the active element?
That's more complicated and I'd strongly advise you against doing it.
Ok then. I leave it like it is.
I'm trying to do something else now... I would like the active botton to be a bit higher than the others. I tried changing the top-padding, but obviously the text appears too low. Then I tried to fix it using vertical-align: middle; but it doesn't work. Please find attached a screenshot of how it looks now. As you can see the text of the active element "home" doesn't appear verticaly centered.
And this is the relevant pieces of code:
Any ideas? Any help would be very much appreciated.
I think I'm making this thread too long. Should I put this new question in a new one?
I'm trying to do something else now... I would like the active botton to be a bit higher than the others. I tried changing the top-padding, but obviously the text appears too low. Then I tried to fix it using vertical-align: middle; but it doesn't work. Please find attached a screenshot of how it looks now. As you can see the text of the active element "home" doesn't appear verticaly centered.
And this is the relevant pieces of code:
div#main-container #header ul li a.nav-selected { /* customize_nav-selected */ /* customize_nav-selected */ padding-top: 20px; border-top: solid 1px black; border-right: solid 1px black; border-left: solid 1px black; } ul li a.nav-path-selected { background-color: #f1c232; }
Any ideas? Any help would be very much appreciated.
I think I'm making this thread too long. Should I put this new question in a new one?
Line 41-47:
I added padding-bottom.
div#main-container #header ul li a.nav-selected { /* customize_nav-selected */ /* customize_nav-selected */ border-top: solid 1px black; border-right: solid 1px black; border-left: solid 1px black; padding-bottom: 7px; }
I added padding-bottom.
Thanks again MoonGrab :)
It's me again.
How do I keep the border when a page below is active?
And how do I center (horizontally) the whole set of buttons?
How do I keep the border when a page below is active?
And how do I center (horizontally) the whole set of buttons?
ul li a.nav-selected {
border: 1px solid #000;
}