• 0
Sign in to follow this  
Followers 0

Remove space between NavBar and Content, also square edges to NavBar

Question

Posted · Report post

How can I remove the space between the NavBar and the content? I have tried Firebug to find the right padding code but am having no success.

 

Also, how can I square off the rounded corners on the NavBar. 

 

Hope that makes sense!

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Add this to PageLines > Site Options > Custom Code:

.navbar.navbar-content-width {
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you dario, that has squared my menu perfectly.

 

Just need to remove the space and then I am done! Any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not at my main computer now but I think something like this:

#nav .content-pad, #secondnav .content-pad {
padding: 0px;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

The easiest way to do this is to use Firebug for Firefox or Chrome's Inspection Tool to see what padding and/or margins are affecting that gap.  Then using those tools, test changes so it meets your needs.  Copy the CSS that works and paste it into Dashboard > PageLines > Site Options > Custom Code.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob,

 

I am just struggling to identify the right code to use, Firebug is not helping, I am sure it is user error!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, when you're using Firebug, and point its cursor at the element you want to inspect, you'll see above Firebug's HTML area, a menu of the CSS levels.  As you go across that menu, you'll find each level of CSS will show up in the CSS area, and once you find the element (it does take some time), you can, of course, test changes, copy and paste the code to your Custom CSS area. 

 

Most people don't know what that menu does, but it works little miracles each time I use it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0