6 replies to this topic

[danielfinn]

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

Please Login or Register to see this Hidden Content

, 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?

[catrina]

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

[danielfinn]

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

Please Login or Register to see this Hidden Content

[Rob]

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.

[danielfinn]

Thanks I have altered my code so now it reads:

Please Login or Register to see this Hidden Content

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.

Please Login or Register to see this Hidden Content

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"

[danielfinn]

RESOLVED

Please Login or Register to see this Hidden Content

[Danny]

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