Problem With 1St Menu Item In Wordpress

[Schenkz]

I recently bought the video tutorial "Build a WordPress Theme from Scratch", and enjoyed it very much.

However I do have a problem with a website I built using this tutorial.

The first menu item seems to contain 2 links (one blank), resulting in showing the actual menu item text underneath the button!

I checked everything but just can’t figure out how to solve this.

I hope someone can be of some assistance.

 

You can find the website at www.befreebehappy.nl

Username: BeFree

Password: BeHappy

 

I’d appreciate your help very much.

Thanx in advance!

 

Edwin

[Andrea]

You have some coding errors that may be causing your issue:

 

<div id="logo">
  <a href="http://www.befreebehappy.nl/">
<img src="http://www.befreebehappy.nl/..../weblogo.png" alt="Be Free, Be Happy"
</a>
           	</div>  

Here, you are missing the closing bracket after the alt: <img src="http://.. alt="Be Free, Be Happy">

 

Fix that first and let me know if you still have a problem.

 

Hint: It's always a good idea to run a page through the validator. It helps detect coding problems which can cause all kinds of havoc.

[Schenkz]

Wow, how could I have missed that? I must have been looking over this at least a dozen times!

 

Thank you so much Andrea!

 

 

Enjoy your weekend, Edwin

 

You have some coding errors that may be causing your issue:

 

<div id="logo">
  <a href="http://www.befreebehappy.nl/">
<img src="http://www.befreebehappy.nl/..../weblogo.png" alt="Be Free, Be Happy"
</a>
           	</div>  

Here, you are missing the closing bracket after the alt: <img src="http://.. alt="Be Free, Be Happy">

 

Fix that first and let me know if you still have a problem.

 

Hint: It's always a good idea to run a page through the validator. It helps detect coding problems which can cause all kinds of havoc.

[Schenkz]

Now there's another small issue (I feel like a complete idiot):

The current-menu-item gets a hover effect, while I just want it to stay the same.

Am I overlooking something else this time?

 

I'm also not sure what kind of validator plugin to use.

 

I hope you can help me out one more time.

 

Grtz., Edwin

 

Wow, how could I have missed that? I must have been looking over this at least a dozen times!

 

Thank you so much Andrea!

 

 

Enjoy your weekend, Edwin

[Andrea]

Check your CSS:

#header .navigation li:hover { 
				height: 42px;
					margin-top: -2px;
				}
#header .navigation a:hover { 
				font-weight: bold;

 

As for the validator, I use Firefox and have the webdeveloper add-on installed. That comes with a Validator Tool. You can also go here: http://jigsaw.w3.org/css-validator/

 

I have no idea if Wordpress does or does not have a validator plug, but you don't need one.

[Schenkz]

Thanx again Andrea, but I'm not sure what you mean;

If I remove those css styles I lose the hover effect on the other menu items as well, and that's not what I want.

I only want to remove the hover effect on the current-menu-item...

[newseed]

If I understand correctly, you want to keep your hover effect but not on a current page. If you are on home then you want to adjust or edit that hover effect.

 

Look for: #header .navigation li.current-menu-item

 

You can adjust your hover there and if you need to adjust the link ( <a> ) on hover then you would add this new class:

 

#header .navigation li.current-menu-item a:hover {/*styles here*/}

 

The key class here is .current-menu-item which gets added on whatever current page you are on.

[Schenkz]

Thanx Eddie, I gave it a try.

Even though I managed to delete the bold fontweight on the hover effect, there's still the hover effect which makes the current menu item lift 2px.

Adding a bottom-margin of -2px doesn't solve that either.

Any other suggestions?

 

Grtz., Edwin

 

If I understand correctly, you want to keep your hover effect but not on a current page. If you are on home then you want to adjust or edit that hover effect.

 

Look for: #header .navigation li.current-menu-item

 

You can adjust your hover there and if you need to adjust the link ( <a> ) on hover then you would add this new class:

 

#header .navigation li.current-menu-item a:hover {/*styles here*/}

 

The key class here is .current-menu-item which gets added on whatever current page you are on.

[newseed]

The part that does that is

 

 

#header .navigation li:hover

 

which has the margin-top: -2px;j and height: 42px;

 

Just remove both of them if you don't want all the tabs to shift upward. However, if you just don't want it to happen for current page's tab then you can try this:

 

#header .navigation li:hover.current-menu-item { height: 40px; margin-top: 0;}

[Schenkz]

That did the trick, thank you Eddie!

 

And sorry for my late reaction, I've been out of town for a couple of days

 

However, now there's another 'problem' (I'm feeling like a complete dummie here):

I'm trying to use a submenu (on the second menu item in this case).

The submenu items get displayed next to each other (inline?) instead of underneath each other (block?) as intended.

 

The CSS for the submenu is

/* SUB MENU ------------------------------------------------ */

/* give the submenu a small margin on the left */

#header .navigation li ul {

margin: 0px;

padding:0px;

display:none;

position:relative;

left:5px;

top: 0px;

}

#header .navigation li:hover ul {

display:block;

}

/* give the submenu a background with a light gradient */

#header .navigation li li {

list-style:none;

display:list-item;

height: 40px;

min-width: 160px;

border: thin solid #bfbcec;

}

#header .navigation li li a {

display: block;

}

And I'm also using the jQuery Superfish plugin.

The result with or without that plugin stays the same...

Any suggestions on how to solve this?

 

Thanx in advance! Edwin

 

The part that does that is

 

 

#header .navigation li:hover

 

which has the margin-top: -2px;j and height: 42px;

 

Just remove both of them if you don't want all the tabs to shift upward. However, if you just don't want it to happen for current page's tab then you can try this:

 

#header .navigation li:hover.current-menu-item { height: 40px; margin-top: 0;}

Edited December 11, 2013 by EdSchenkz

[Schenkz]

Problem solved!

Turned out I had to make some adjustments in the CSS.

 

Thanx everyone!