How do I reduce the size of the navigation bar produced by creating a Visual Studio MVC project

The layout and spacing is caused by the Bootstrap.css file, so you would need to either edit that (probably not recomended) or add your own custom CSS that overrides the bootstrap styles. This has nothing to do with MVC - it's simply a case of styling your HTML with CSS.

As for the spacing, it's likely caused by the margins paddings and line-spacing of various elements including the navbar class, the nav class, the <li> elements and the <a> elements. For example, the .navbar class will probably have a padding added to the top and bottom, the .nav-link class will probably have padding added top and bottom. The entire nav will likely have bottom margins.

Can't give you specifics but if you load up your web page, and then use the web dev tools that are built into modern browser (press your F12 key), then you should be able to see exactly what elements have what spacing. The dev tools will also show you where and in which CSS file this spacing is added, so you can easily edit it.

If you want us to take a look and offer futher advice, post up a link to your site - just a working demo - and we can examine the HTML and CSS directly.

I don't have this on a site. The markup is in my question. All the classes are bootstrap classes. My guess is that I can override the bootstrap settings in the site.css file. I just need to know how to do that.

Yeah you can override the bootstrap classes in your own css file. My point was to take a look at your site once you've got it up in a browser so you an see exactly which elements have spacing applied. For example, the .navbar  class will have a top and bottom of 0.5rem applied and a bottom-margin of 20px added. To override that, just add it to your own css:

.navbar { padding-top: 0; padding-bottom:0; margin-bottom:0; }

The actual height of the navbar will likely be set by the line-height of your font- so you may need to override that.

Learn to use the web dev tools on your site and you'll be able to see exactly what is applied to each element and then override it accordingly.

That did not work. Here's a screen shot before and after trying to override .navbar in the site.css file:

Before



After


I assume by 'web dev tools' you're talking about the DOM navigator. When I start removing all the styling, the div does seem to shrink in height, but the controls below do not move up into the apparently empty space.

After revisiting the DOM window, removing .nav li > a display: block and the top and bottom padding from from navbar-nav > li > a reduced the height of the menu. However, when I hover over a link, the height looks like it's only affected by the removal of the padding.

But, when I try to override by setting .nav li > a to change display to other values, nothing reduces the height of the menu bar.

Unfortunately without seeing your code I can't begin to guess what you're trying to do.

Removing display:block doesn't seem like the right idea at all and it is unlikely to have any effect on your height - that will be down to margins / paddings / font-size and line-height.

If you won't post a link to your site or a demo site, can you at least replicate the code on something like JsFiddle.

I'm not sure what code you want to see other than what I've posted. If you want to see all the code, just create a new MVC project in a fairly recent version of Visual Studio. Everything I'm talking is generated after creating the project.

OK. I can't see what CSS is being applied to YOUR project. Only you can see that. All you've shown is a small part of your .NET code - it's not even full HTML. You haven't said what version of BootStrap you're running, or what other CSS you've applied.

I know exactly how to sort CSS on my own projects, but that's my code - not yours!! I can talk you through how I would change my CSS on my project to affect my layout, but that's not really going to help you.

When I create a new MVC Application I can see that the _Layout file has the navigation wrapped in a Container that's wrapped in a NavBar. It also has a Navbar Header in there. When I run my application I can see that the .navbar-nav > li > a CSS Rule has a top and bottom padding of 15px, and that the .navbar-brand has a line-height of 20px with a top/bottom padding of 15px. I can also see that the .navbar rule has a min-height of 50px with a bottom margin of 20px. All of this affects the spacing and I can see precisely how the spacing is applied to my navigation by using the WebDev tools. What I can't see is how YOUR css is applied to YOUR navigation.

By your own admission you've changed the HTML 'a bit', and in doing so, you've changed how the default CSS is applied to the default HTML.

I've already tried to offer you suggestions on how you can examine your own CSS on your site, but you say that's not working so rather than trying to guess what your site is doing, I've asked that you simply show us your site (not just a tiny part of your raw .NET code).

Here's a link to a demo of how the default MVC homepage looks straight out of box: http://jsfiddle.net/ChrisStanyon/y0gjrpbu/

I can tell you exactly how to alter the spacing on that. I can't give you specific answers to your problem without seeing your site.

Perfect. Please let me know how you can change the height of the div at the top with the buttons, and the body content needs to move up to fill in the space saved by reducing the height of the menu.

Perfect! I had no clue about changing navbar-brand.

PS: the colon is missing after padding in the 1st line. No big deal.