Jump to content


Photo
- - - - -

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


Best Answer dario , 14 July 2013 - 04:17 PM

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;
} Go to the full post


  • Please log in to reply
6 replies to this topic

#1 HudReed

HudReed

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 14 July 2013 - 03:19 PM

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!

Attached Files



#2 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 14 July 2013 - 04:17 PM   Best Answer

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;
}

#3 HudReed

HudReed

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 14 July 2013 - 04:19 PM

Thank you dario, that has squared my menu perfectly.

 

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



#4 dario

dario

    Super Member

  • Members


  • 152 posts
  • LocationMinneapolis
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 14 July 2013 - 04:22 PM

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

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

#5 Rob

Rob

    One Smart Egg

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

Posted 14 July 2013 - 06:04 PM

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.



#6 HudReed

HudReed

    Newbie

  • Members
  • 5 posts
  • Country: Country Flag

Posted 15 July 2013 - 04:37 PM

Hi Rob,

 

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



#7 Rob

Rob

    One Smart Egg

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

Posted 15 July 2013 - 07:27 PM

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.