Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Navbar CSS help: Child pages overlapping parent

Question

Posted · Report post

I would like to add some padding between the bottom of a parent menu item and its associated child menu items. For example, upon visiting my staging site http://danielfinncouk.zippysites.com/, when hovering your mouse over the ABOUT section in the main navbar, the associated child menu items overlap the ABOUT tab. I would like to remove this overlapping and instead make the menu items flush against each other. Could someone help me with some CSS?

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Do you have any other custom CSS (any at all)? It may cause a CSS conflict. If not, you'll need to increase the top margin of the "About" submenu so that it gets pushed down (about 7 or 8 pixels). To find the right CSS selector for that submenu, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please read and follow these instructions: http://www.pagelines.com/wiki/Custom_CSS. The CSS selector is used to select the page element you want to change (in this case, your submenu). For help with the margin attribute (which needs to be tweaked to make the adjustment on your menu), please see this: http://www.w3schools.com/cssref/pr_margin-top.asp

Share this post


Link to post
Share on other sites

Posted · Report post

This is the custom CSS I have added regarding the navbar. Are there any obvious conflicts in the code?

	/* ==== MAIN NAV ==== */
	#menu-nav a {
	    font-size: 18px;
	    color: #252727;
	    background-color: #ffffff;
	    border: 4px solid white;
	}
	
	#menu-nav a:hover {
	    color: #ffffff;
	    border: 4px solid white;
	    background-color: #252727;
	

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks I have altered my code so now it reads:

	/* ==== MAIN NAV ==== */
	#menu-nav a {
	    font-size: 18px;
	    color: #252727;
	    background-color: #ffffff;
	}
	
	#menu-nav a:hover {
	    color: #ffffff;
	    background-color: #252727;
	]
	
What I would like to do is alter the border associated with solely the child items of a specific parent menu item in the nav bar. I have used firebug to inspect the menu item and have found it to have this anchor.
	class="page_item page-item-1857"
	

I hav noticed that any alteration of this class changes the parent item and its child items. How do you isolate the parent or the child? class="page_item page-item-1857"

Share this post


Link to post
Share on other sites

Posted · Report post

The 4px solid white part of the child menu items is covering the parent. Additionally, whatever you wrote for the parent menu items has insufficient padding- or margin-bottom to accommodate that border, moving it down by a corresponding 4px. If the border were transparent, then it would allow the parent to show through, but the better move is to pad or margin the child elements down by 4px.

Share this post


Link to post
Share on other sites

Posted · Report post

RESOLVED

	#menu-nav li.page-item-1857 .children {
	    margin-top: 8px;
	}
	

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you for informing us, the issue has been resolved, we appreciate it.

Share this post


Link to post
Share on other sites