Lifestyle Pro navigation help

[jtdatawork]

I have tried for hours to figure this out. The active menu item, and or the hover appear to have a right border of the main background color that extends over into the next menu item area. I just want the menu items to be one color as a link, and another for current or hover, and a white right border. Pretty standard. I have no idea where this extra (border?) is coming from. Can anyone help? Many thanks in advance!

Judy

---

JT Dataworks Web design and SEO

http://nobones.server303.com/allys-page/

[Davinder Singh Kainth]

Found an error in your style.css file which could be causing issue. Check following code:

.genesis-nav-menu > li:hover a,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	background-color: #621e1e;
	color: #fff;
padding: 

Either remove padding: or make it padding:0px;

If still issue, update this thread.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[jtdatawork]

Thank yous for finding that! It was left over from my attempts to find or fix this, and I removed it.

But the problem persists. That line is part of the original theme. If you look at the Lifestyle theme demo, you can see it if you click on a link, then mouse over the adjoining one. I just can't figure out how to remove it. 🙁

http://my.studiopress.com/themes/lifestyle/#demo-full

---

JT Dataworks Web design and SEO

[ryanbednar]

Hi Judy,

I am having the EXACT same problem, and it's been driving me crazy... I cannot figure it out! I also have verified that the same problem exists in the Lifestyle Pro demo, so it's not just the two of us!

It seems like a right margin or padding is being added to the li.menu-item, but I cannot find any CSS that would be causing this. I can usually figure issues like this out using Firebug, but again there doesn't seem to be any CSS rules that would be causing this.

I will open a support ticket and reference this post. I will be sure to post the solution if we find one!

Thanks,
~Ryan

[jtdatawork]

Hi Ryan,

YAY! I'm not crazy! Thanks for the note. 🙂 After hours of trying to figure it out, it appears that the line is actually part of the background color showing through because the navigation block does not cover it. I tried changing the padding but it didn't help. I tried finding another theme to use that nav code, but this new "feature" seems to be designed into most of the new themes, not just Lifestyle!

Fix it I cannot. I finally just changed the design. I'll be delighted if you can find a solution because this is really cramping my choices in designing the nav bar look on sites.

Judy

---

JT Dataworks Web design and SEO

[ryanbednar]

Well, after a few hours and few different approaches, I *think* I've figured out the solution!

As you mentioned, it was definitely the background that was showing through, I just couldn't figure out where the extra spacing between the buttons was coming from.

The problem seems to be related to the inline-block value of the "li" element. I've added a float:left; to the rule, and it seems to remove the extra spacing between the buttons... still need to do some testing to make sure this doesn't break anything anything else, but so far so good. Here's how my new CSS rule looks:

.genesis-nav-menu .menu-item {
	display: inline-block;
	float: left;
	text-align:left;
}

Hope this helps!
~Ryan

[jtdatawork]

Yep, it worked! Thank you, thank you!

Judy

---

JT Dataworks Web design and SEO

[Author]

Posts