Navbar wrapper/border height

militiaman11
(@militiaman11)

12 years ago

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, 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
(@rdellconsulting)

12 years ago
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 useful for other customization.
deputy05
(@deputy05)

12 years ago

Sorry rdellconsulting beat me to it…post removed…

Thread Starter militiaman11
(@militiaman11)

12 years ago

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
(@rdellconsulting)

12 years ago

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!

<h1>Positioning the Navbar Box</h1>
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
(@rdellconsulting)

12 years ago
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
(@rdellconsulting)

12 years ago

ElectricFeet
(@electricfeet)

12 years ago

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
(@rdellconsulting)

12 years ago
Please don’t proofread the above text – it has some flaws! I’ve just corrected my text.
<h3>Positioning the Navbar Box</h3>
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
(@militiaman11)

11 years, 12 months ago

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
(@militiaman11)

11 years, 12 months ago

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.

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
(@rdellconsulting)

11 years, 12 months ago

OK, you need to understand the @media statement.

Then you can adjust margin/padding of menu items in the offending viewport(s).

I tend to use Resizer to test them.

Did you ever try Firebug which will allow you to test changes in realtime