Jump to content


Photo
- - - - -
Resolved

Navbar CSS help: Child pages overlapping parent



  • Please log in to reply
6 replies to this topic

#1 danielfinn

danielfinn

    Advanced Member

  • Members
  • 92 posts

Posted 05 September 2012 - 01:08 PM

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?

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 September 2012 - 02:49 PM

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



#3 danielfinn

danielfinn

    Advanced Member

  • Members
  • 92 posts

Posted 05 September 2012 - 08:03 PM

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



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 September 2012 - 10:12 PM

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.

#5 danielfinn

danielfinn

    Advanced Member

  • Members
  • 92 posts

Posted 09 September 2012 - 10:26 PM

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"

#6 danielfinn

danielfinn

    Advanced Member

  • Members
  • 92 posts

Posted 09 September 2012 - 11:34 PM

RESOLVED


Please Login or Register to see this Hidden Content


  • Danny likes this

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15269 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 September 2012 - 09:38 AM

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





Also tagged with one or more of these keywords: Resolved