Jump to content
The Tux Crusader

CSS nav bar - Help Wanted

Recommended Posts

I have a minor issue that is bugging me. I can't seem to work it out (probably due to spending to much time on it). The issue is that when I hover over the menu items the whole menu bar expands and jumps the the content on the rest of the page down a bit. I've done other themes and never had this issue. I'm sure its something simple but my brain is escaping me and sometimes it pays to have a fresh set of eyes look it over. Here is the css for the menu;

.main-navigation { /* wraps the entire navigation menu */background-color: #3B813B;font-size: 2em;text-decoration: none;border-bottom: 2px solid #3B813B;border-bottom-left-radius: 35px;border-bottom-right-radius: 35px;padding: 4px;}.main-navigation:after { /* Clears the floats after the menu */clear: both;content: "";display: block;}.main-navigation ul { /* The menu is an unordered list */list-style: none;margin: 0;}.main-navigation li { /* Makes the menu "list" items horizontal */float: left;margin-left: 1%;position: relative;}.main-navigation a { /* The individual list item links */display: block;text-decoration: none;text-align: center;padding: 4px;padding-left: 8px;padding-right: 15px;color: white;}.main-navigation ul ul { /* Submenu drop-down "box" */background-color: #3B813B;display: none;width: auto;position: absolute;  top: 1.3em;  left: 0;z-index: 99999;}.main-navigation ul ul ul { /* 3rd+ level drop-down "box" */left: 100%;top: 0;width: 100%;}.main-navigation ul ul li { /* List items inside the drop-down box */  }.main-navigation ul ul a { /* Menu links inside the drop-down "box" */padding: 4px;padding-left: 8px;padding-right: 15px;}.main-navigation li:hover > a,.main-navigation li.current_page_item a,.main-navigation li.current-menu-item a,.main-navigation ul ul a:hover { /* Hover styles for menu items */background-color: #469946;border-bottom: 2px solid #469946;border-radius: 15px;padding: 4px;padding-left: 8px;padding-right: 15px;}.main-navigation ul ul :hover > a { }.main-navigation ul li:hover > ul {display: block;}

And the site url is;jonathantrinham.com I've tried changing different settings such as padding's etc but no luck. Any ideas anyone?

Share this post


Link to post
Share on other sites

When you hover over the anchor link element it appears with a 1px border (2px total difference), and it is removed when in normal state, you have to counteract this by applying a 1px margin for example, (transparent border, i think has problems associated with its use), on the normal state, and remove it on the hover state.

Share this post


Link to post
Share on other sites
When you hover over the anchor link element it appears with a 1px border (2px total difference), and it is removed when in normal state, you have to counteract this by applying a 1px margin for example, (transparent border, i think has problems associated with its use), on the normal state, and remove it on the hover state.
Ok I tried applying a 1px margin like you suggested, I saw the normal state adjust to the margin but it's still doing the same thing.

Share this post


Link to post
Share on other sites

lose the padding on hover, OR add it to normal state

.main-navigation a {	color: #2ED2FF;	display: block;	margin: 1px;/*added by dsonesuk*/	text-decoration: none;} .main-navigation li:hover > a {	background-color: #2ED2FF;	border: 1px solid #2ED2FF;	border-radius: 25px 25px 25px 25px;	box-shadow: 0 0 15px #56DAFE;	color: yellow;	margin: 0; /*added by dsonesuk */    /*padding: 2px; removed by dsonesuk (this needs to be added to above OR removed*/}  .main-navigation ul ul {	background-color: #1E1E1E;	border: 2px solid #2ED2FF;	border-radius: 25px 25px 25px 25px;	box-shadow: 0 0 5px #56DAFE;	display: none;	float: left;	left: 0;	position: absolute;	top: 44px; /* top: 3em; amended by dsonesuk */	z-index: 99999;}

Use px unit for top, this needs to be precise, not dependant on font size, which would cause to move away more than it should and make submenu unreachable, unless you have quick rreactions, that is.

Share this post


Link to post
Share on other sites
lose the padding on hover, OR add it to normal state
.main-navigation a {  	color: #2ED2FF;	display: block;	margin: 1px;/*added by dsonesuk*/	text-decoration: none;}   .main-navigation li:hover > a {  	background-color: #2ED2FF;	border: 1px solid #2ED2FF;	border-radius: 25px 25px 25px 25px;	box-shadow: 0 0 15px #56DAFE;	color: yellow;	margin: 0; /*added by dsonesuk */	/*padding: 2px; removed by dsonesuk (this needs to be added to above OR removed*/}    .main-navigation ul ul {  	background-color: #1E1E1E;	border: 2px solid #2ED2FF;	border-radius: 25px 25px 25px 25px;	box-shadow: 0 0 5px #56DAFE;	display: none;	float: left;	left: 0;	position: absolute;	top: 44px; /* top: 3em; amended by dsonesuk */	z-index: 99999;}

Use px unit for top, this needs to be precise, not dependant on font size, which would cause to move away more than it should and make submenu unreachable, unless you have quick rreactions, that is.

Thank you, for you help.

Share this post


Link to post
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.

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...