Jump to content

The Tux Crusader

Members
  • Posts

    4
  • Joined

  • Last visited

Posts posted by The Tux Crusader

  1. 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.
  2. 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.
  3. 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?

  4. Hi all I recently joined this forum in hopes to further my skills and knowledge in web design. Does anyone know of any good threads or tutorials on SEO. I'd like to know more about improving google ranking etc. Thanks. The Tux Crusader.

×
×
  • Create New...