Jump to content


Photo
- - - - -

Navigation Menu Drop Down Menu Alignment & Width

menu nav bar drop down alignment width

Best Answer catrina , 17 December 2012 - 08:09 PM

I highly recommend that you use Firebug in Firefox (I prefer it over using Chrome inspection tools). It'd be much easier to identify the selector in the right side of the inspector screen (where the CSS is shown).

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 justinn

justinn

    Advanced Member

  • Members
  • 42 posts

Posted 17 December 2012 - 12:10 PM

Hi

 

I'm currently working on a site for a client and they would like me to align the drop down menus on the main nav bar with the main menu item. They would also like the width of the drop downs to be reduced a little too.

 

Please could you point me in the right direction of where I need to head to edit the css?

Attached is a mock up image of what I'm wanting to do. I'm using the latest release of Pagelines and the Base Child Theme.

Please Login or Register to see this Hidden Content

 

 

Thanks

 

Justin

Attached Files



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 17 December 2012 - 03:23 PM

Instead of editing the existing CSS, you must add CSS that overwrites the existing code to Site Options > Custom Code > Custom CSS. Please see here for further instructions:

Please Login or Register to see this Hidden Content



#3 justinn

justinn

    Advanced Member

  • Members
  • 42 posts

Posted 17 December 2012 - 08:05 PM

Hi Catrina,

 

Thanks for the reply. Sorry I should have been more accurate with my question. What are the CSS selectors/elements I should use to overwrite the default code.

 

I've tried using Right Click/Inspect element in Chrome but I can't seem to grab hold of the drop down menu long enough for it to show me the correct css for the dropdown.

 

Thanks

 

Justin



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 17 December 2012 - 08:09 PM   Best Answer

I highly recommend that you use Firebug in Firefox (I prefer it over using Chrome inspection tools). It'd be much easier to identify the selector in the right side of the inspector screen (where the CSS is shown).



#5 justinn

justinn

    Advanced Member

  • Members
  • 42 posts

Posted 17 December 2012 - 08:10 PM

No worries... I persevered with Chrome (really fallen out of love with Firefox in our studio)... Got it sorted :)

 

Thanks



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 17 December 2012 - 08:26 PM

Ok awesome. Was that the only assistance you needed?



#7 justinn

justinn

    Advanced Member

  • Members
  • 42 posts

Posted 17 December 2012 - 08:29 PM

Yep, all sorted for now :) 

 

I can do all the other edits my client requires. Just couldn't nail down that css selector :)