Hover color box odd size

belleweatherfarm · Member · Mar 14, 2015 at 3:31 pm
Copy link

Add topic to favorites
Hi :) When I move the mouse over my menu bar, the hover change-color box does not line up on the left with the drop down menu, and it looks strange. I don’t mind if the padding on the right of the box stays the way it is, but is there any CSS that can add a bit of padding on the left so it will line up with the drop down menu?

The blog I need help with is: (visible only to logged in users)
belleweatherfarm · Member · Mar 14, 2015 at 4:12 pm
Copy link
I tried it, and it didn’t change the size of the hover box on the menu bar, but it did make the hover color of the dropdown disappear and made if flash in a wonky way :)
belleweatherfarm · Member · Mar 14, 2015 at 5:54 pm
Copy link
LOL! That made the drop down hover color boxes smaller, I’d like to make the menu bar hover color wider.

Thank you so much for trying things out. If you have another try, I’d love it :)
thesacredpath · Member · Mar 16, 2015 at 6:47 pm
Copy link
Hi, let’s give the following a try. I’ve made a couple of adjustments to padding so that there is equal padding on left and right of the menu item label so it looks centered in the hover color and then I also aligned the submenu with the left edge of the background color on the top level parent item in the menu.
```
.main-navigation ul li a {
    padding-left: 20px;
    padding-right: 20px;
}
.main-navigation li {
    padding-right: 0;
}
.main-navigation ul ul {
    left: 0;
}
```
belleweatherfarm · Member · Mar 17, 2015 at 12:35 am
Copy link
Hah ha! Hi Sacred Path!

Oops!!!! The CSS did VERY strange things, lined up all the menu bar words as one big word, and took out hover colors altogether, so I took it out! I took a screenshot, is there any way to post it or send it to you?

Perfect timing, just started with syrup, if it lasts more than a week, we’re on for this year (none last year, sap ran only a week, we bought all winter long :( ) Same mailing?
thesacredpath · Member · Mar 17, 2015 at 6:07 pm
Copy link
You are missing an ending curly bracket on the last rule in your CSS. When I went to your customizer and added that curly and then pasted in the code I gave, everything works.

Mmmmm, syrup!!! You have the Austin email address, correct? If so, that is the one.
belleweatherfarm · Member · Mar 17, 2015 at 11:48 pm
Copy link
Just BEAUTIFUL! Makes the whole thing feel so much more “together”! And, I did it on the puppetry site, too, and did notice the same missing end bracket there.

Thank you! And yes, I’ve got the Austin address. Just ate myself giddy with fresh syrup and a crowd of visitors standing around staring at boiling sap. YUM!
thesacredpath · Member · Mar 18, 2015 at 12:20 am
Copy link
Great, and glad it worked. Nice to have the crowd, too. Nothing makes sap boil better than a bunch of eyes on it. :)

No items found.