Jump to content


Photo
- - - - -

Aligning main nav and second nav

main-nav second nav aligning Custom CSS main nav second nav secondary nav

Best Answer Danny , 24 February 2013 - 10:56 AM

Hi,

 

The cause of the spacing is padding, each main navigation menu link has padding of 10px on top and bottom and 15px left and right. If you inspect your menu links for both the main navigation and secondary navigation, you will be able to see the this and the code used.

 

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the each navigation section menu items a element to find the correct code and then reduce the left padding to 0.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 EvaB

EvaB

    Advanced Member

  • Members
  • 45 posts
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 21 February 2013 - 02:23 PM

Hi, I hope someone can help me with this, because I have browsed all the forums, but can't find an answer...

 

At 

Please Login or Register to see this Hidden Content

I would like to:

1. left align my main and secondary nav with the header (the sec nav lines with the header, but I can't find how to adjust the main nav)

2. diminish the horizontal space between the main and secondary nav

3. divide the space between the main and secondary nav with a horizontal line (1px)

 

I already have made some adjustments in the Custom Css, and some work, but some don't. I also tried to make these adjustments via the Pageline Customize Plugin, but that did not seem to work. Is there a big difference between those two, or is it just what one prefers?

 

Thanks in advance!!

Eva



#2 catrina

catrina

    Advocate

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

Posted 21 February 2013 - 05:46 PM

Hello, have you already added #page at the beginning of each CSS declaration block? If you don't add that, your CSS won't overwrite the default. For more info, please see:

Please Login or Register to see this Hidden Content



#3 EvaB

EvaB

    Advanced Member

  • Members
  • 45 posts
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 23 February 2013 - 05:42 PM

Hi, thanks. I have added #site in my Custom CSS, and it works fine I think.

I just can't find what I need to change in order to:

 

 

left align my main and secondary nav with the header (the sec nav lines with the header, but I can't find how to adjust the main nav)

diminish the horizontal space between the main and secondary nav

divide the space between the main and secondary nav with a horizontal line (1px)

 

I appreciate any help.



#4 Danny

Danny

    Is Awesome!

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

Posted 24 February 2013 - 10:56 AM   Best Answer

Hi,

 

The cause of the spacing is padding, each main navigation menu link has padding of 10px on top and bottom and 15px left and right. If you inspect your menu links for both the main navigation and secondary navigation, you will be able to see the this and the code used.

 

 

I recommend using Firebug or your browsers built-in web dev tools and inspect the each navigation section menu items a element to find the correct code and then reduce the left padding to 0.

 

For assistance visit our custom CSS documentation - 

Please Login or Register to see this Hidden Content


  • EvaB likes this

#5 EvaB

EvaB

    Advanced Member

  • Members
  • 45 posts
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 24 February 2013 - 11:28 AM

Thanks a lot Danny,

Don and it works!!

By the way, is it wise to use #site at all changes in Custom CSS?



#6 EvaB

EvaB

    Advanced Member

  • Members
  • 45 posts
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 24 February 2013 - 11:34 AM

I am sorry to bother you again, but just one more thing: I would like to change the text color of the a active in the second nav. Is that possible?Thanks again!



#7 Danny

Danny

    Is Awesome!

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

Posted 24 February 2013 - 11:51 AM

You style a navigation menu active item, you will want to read here for assistance - 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

Using #site is simply a method to guarantee your custom CSS overrides the default PageLines styling, so there is no issue using it. We actually recommend it.


  • EvaB likes this

#8 EvaB

EvaB

    Advanced Member

  • Members
  • 45 posts
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 24 February 2013 - 11:59 AM

Thanks again Danny, you have been a great help. Now everything works fine.



#9 Danny

Danny

    Is Awesome!

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

Posted 24 February 2013 - 12:03 PM

Great, happy to hear your issue(s) have been resolved.

 

However, in future when your original question has been answered correctly, can you refrain from asking other questions please. If you have another question, please create a new topic, this will assist other users in the future who may have a similar question.



#10 EvaB

EvaB

    Advanced Member

  • Members
  • 45 posts
  • Framework Version:2.3.4
  • Country: Country Flag

Posted 24 February 2013 - 12:07 PM

Ok, I will remember this for the future. Maybe I can add extra tags to this topic to be of any help?







Also tagged with one or more of these keywords: main-nav second nav aligning, Custom CSS, main nav, second nav, secondary nav