Jump to content

Problem With 1St Menu Item In Wordpress


Schenkz

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

That did the trick, thank you Eddie!

 

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

 

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 by EdSchenkz
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...