Title: Navbar wrapper/border height
Last modified: August 21, 2016
---
# Navbar wrapper/border height
* [militiaman11](https://wordpress.org/support/users/militiaman11/)
* (@militiaman11)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/)
* Hello,
* I apologize of this is covered in a different thread, but I have been searching
for hours and cannot find an answer.
* I would like to change the height of the wrapper around the navbar. If you look
at my site, [http://www.robinnicolai.com](http://www.robinnicolai.com), you will
see that the white space around the navbar menu is about three times as tall
as the text. I would simply like to make this smaller so that it is closer to
the size of the text. I have found plenty of code for manipulating this space,
but nothing that has worked for changing height.
* Any help would be appreciated. Thanks.
Viewing 11 replies - 1 through 11 (of 11 total)
* [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* (@rdellconsulting)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926564)
* You have this in your style sheet:
* ```
.navbar .navbar-inner {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
height: 80px;
}
```
* You need to adjust the 80px, try 20px for example.
* You might find the [CSS Glossary](http://www.themesandco.com/customizr/css-glossary-for-the-customizr-wordpress-theme/)
useful for other customization.
* [deputy05](https://wordpress.org/support/users/deputy05/)
* (@deputy05)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926569)
* Sorry rdellconsulting beat me to it…post removed…
* Thread Starter [militiaman11](https://wordpress.org/support/users/militiaman11/)
* (@militiaman11)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926623)
* Hi,
* Actually I forgot that I had already tried that. I did it again so that you can
see what happens. What happens is that yes, the size of the wrapper is changed,
but the wrapper seems to be bound to the top location, wherever that is defined.
So the wrapper is no longer as high as before, but now is is no longer around
the menu/navbar, but rather above. What I really need to do is to reduce the
height and be able to keep the wrapper around the menu/navbar. I would like to
be able to define how far vertically the combination of wrapper and menu/navbar
is from the top of the slider. Because, like I said, it seems that the wrapper
is based off of a top location definition that I have not yet figured out how
to move. Hopefully this clarifies.
* Thanks.
* [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* (@rdellconsulting)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926630)
* I’m writing a Navbar Guide at the moment, but probably won’t be available for
a few days.
* Just written this today so you can proofread it for me!
* > Positioning the Navbar Box
> There are 2 simple ways in CSS to reposition
> the Navbar: Margin /* Select one of the margin statements below */ navbar.notresp
> navbar-inner { margin {0px 0px;} /* Default position */ margin-top {20px;} /*
> Move down by 20px */ margin-bottom {-20px;} margin-bottom {20px;} /* Move up
> by 20px */ margin-top {-20px;} margin-left {20px;} /* Move right by 20px */
> margin-right {-20px;} margin-right {20px;} /* Move left by 20px */ margin-left{-
> 20px;} margin {20px 0px 0px 20px;} /* Move down 20px, right 20px */ }
> Tip: the margin selector uses 1, 2 or 4 dimensions as follows:
> margin: 10px;/*
> Adds 10px to top, right, bottom, left) margin: 0px 10px; /* Adds 0px to top,
> bottom & 10px to right, left */ margin: 0px 10px 20px 30px; /* Adds 0px to
> top, 10px to right, 20px to bottom, 30px to left */
> Position
> navbar.notresp navbar-inner { position: relative; top: 0px; /* Default
> position */ left: 0px; * Default position */ }
> So with similar logic to the margin selector, the Navbar can be moved around
> the page by adjusting the top/bottom and left/right dimensions:
> {top: 20px;
> left: 30px;} /* Down 20px, Right 30px */ {bottom: -20px; right: -30px;} {top:-
> 60px; left: -40px;} /* Up 60px, Left 40px */ {bottom: 60px; right: 40px;}
* [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* (@rdellconsulting)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926632)
* This your current style code:
* ```
.navbar .navbar-inner {
margin: 14px 20px 10px -20px;
max-width: 100%;
padding-left: 5px;
}
```
* Try reducing that max-width to say 90%
* [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* (@rdellconsulting)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926635)
* [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
* (@electricfeet)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926636)
* Currently, the `.navbar .navbar-inner` is defined twice in your styles. Once
setting `height: 10px;` and once setting `height: 10px;`.
* Try taking that height setting out altogether, and it should fix itself (you
may need to play with the margins of the menu itself).
* [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* (@rdellconsulting)
* [12 years ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926677)
* Please don’t proofread the above text – it has some flaws! I’ve just corrected
my text.
* > Positioning the Navbar Box
> There are 2 simple ways in CSS to reposition
> the Navbar: **Margin**
> ```
> /* Select one of the margin statements below */
> navbar.notresp navbar-inner {
> margin: 0px 0px; /* Default position */
>
> margin-top: 20px; /* Move down by 20px */
> margin-bottom: -20px;
>
> margin-bottom: 20px; /* Move up by 20px */
> margin-top: -20px;
>
> margin-left: 20px; /* Move right by 20px */
> margin-right: -20px;
>
> margin-right: 20px; /* Move left by 20px */
> margin-left: -20px;
>
> margin: 20px 0px 0px 20px; /* Move down 20px, right 20px */
> }
> ```
>
> Tip: the margin selector uses 1, 2 or 4 dimensions as follows:
> ```
> margin: 10px; /* Adds 10px to top, right, bottom, left */
> margin: 0px 10px; /* Adds 0px to top, bottom and 10px to right, left */
> margin: 0px 10px 20px 30px; /* Adds 0px to top, 10px to right, 20px to bottom, 30px to left */
> ```
>
> **Position**
> ```
> navbar.notresp navbar-inner {
> position: relative;
> top: 0px; /* Default position */
> left: 0px; /* Default position */
> }
> ```
>
> So with similar logic to the margin selector, the Navbar can be moved around
> the page by adjusting the top/bottom and left/right dimensions:
> ```
> top: 20px; left: 30px; /* Down 20px, Right 30px */
> bottom: -20px; right: -30px;
> top: -60px; left: -40px; /* Up 60px, Left 40px */
> bottom: 60px; right: 40px;
> ```
>
* Thread Starter [militiaman11](https://wordpress.org/support/users/militiaman11/)
* (@militiaman11)
* [11 years, 12 months ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926742)
* Sorry for the delay. I haven’t been able to work on the site for a day or two.
Thank you so much for the quick responses. I will be working with this tonight,
and I will update you on whether it works. Thanks for the help.
* Thread Starter [militiaman11](https://wordpress.org/support/users/militiaman11/)
* (@militiaman11)
* [11 years, 12 months ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926743)
* Ok, so I have played around with the code you have given to me. Both of you.
And I understand. But I have realized that perhaps my issue isn’t with positioning
or sizing the navbar, but rather the behavior of the navbar within the page.
I thought I was wanting to change the size and the position, but when I resized
my safari browser I realized this is not the case.
* The problem is this. At different browser window sizes the navbar appears different.
There seems to be something that causes the navbar to both change position and
size when the browser window is made to be smaller or larger. I have posted screen
shots of this here: [http://www.robinnicolai.com/test](http://www.robinnicolai.com/test).
* If you look at the first image, the navbar/menu appears as it would on a mobile
device. This is when my safari browser is very narrow on my computer. The menu
is reduced to a button, and the wrapper is the size that I want. Also notice
the very large size of the white footer for the page.
For the second image,
I made my browser window slightly wider. At this point the navbar/menu remains
unchanged and scales with the size of the browser window, but now the white space
footer is significantly smaller. For the third image, I made my browser window
even wider. Now the navbar/menu has jumped beneath the white wrapper, and the
menu is on the left side. This is what I intended to show to you in my previous
post, but I did not realize this was a function of browser window size. So you
may not have seen this behavior. For the fourth image, I made the browser even
wider still. At this point, the menu has now gone back into the white wrapper,
but now is on the right side of the screen. The white footer remains unchanged.
For the fifth and final image, my browser window is the largest for this test.
The menu now begins to work its way toward center, and the white wrapper no longer
reaches the far left side of the window. Also, notice the white footer has been
moved down (Not visible in the screen shot).
* I guess my issue now, since I have realized this behavior, is how to cause the
navbar/menu to consistently change with browser window size, along with the footer.
I thought maybe this behavior was influenced by the slider, as that scales with
browser window size, but the same behavior is seen on other pages without a slider.
I would like to have the menu remain on one side of the window and inside the
wrapper. I do not mind the reduction to mobile view at very small windows.
* I realize that this post is super long, and that maybe this is turning into another
topic. So I apologize. Hopefully you have some answers. If you would like for
me to start a new topic just let me know.
* Thank you again for you help and patience.
* [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* (@rdellconsulting)
* [11 years, 12 months ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926747)
* OK, you need to understand the @[media ](http://www.themesandco.com/snippet/media-queries-responsiveness/)
statement.
* Then you can adjust margin/padding of menu items in the offending viewport(s).
* I tend to use [Resizer ](http://lab.maltewassermann.com/viewport-resizer/)to
test them.
* Did you ever try [Firebug ](http://www.themesandco.com/snippet/firebug-best-spent-6-minutes/)
which will allow you to test changes in realtime
Viewing 11 replies - 1 through 11 (of 11 total)
The topic ‘Navbar wrapper/border height’ is closed to new replies.
* 
* Customizr
* [Support Threads](https://wordpress.org/support/theme/customizr/)
* [Active Topics](https://wordpress.org/support/theme/customizr/active/)
* [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
* [Reviews](https://wordpress.org/support/theme/customizr/reviews/)
## Tags
* [border](https://wordpress.org/support/topic-tag/border/)
* [height](https://wordpress.org/support/topic-tag/height/)
* 11 replies
* 4 participants
* Last reply from: [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
* Last activity: [11 years, 12 months ago](https://wordpress.org/support/topic/navbar-wrapperborder-height/#post-4926747)
* Status: not resolved