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

When you create a MVC project in Visual Studio 2015, a default _Layout.cshtml page is created. The markup includes the following DIV (I changed the div a bit):
    <div class= "navbar navbar-collapse collapse navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Users", "Users", "Home")</li>
            <li>@Html.ActionLink("General", "General", "Home")</li>
            <li>@Html.ActionLink("Customer Portal", "CustomerPortal", "Home")</li>
        </ul>
    </div>

Open in new window


I want to reduce the height of the div and all its elements to about 25 px,, and move the rest of the body content up to fill in the space created.
8042981Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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.
0
8042981Author Commented:
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.
0
Chris StanyonWebDevCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Before

Output from my project with default values

After

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.
0
8042981Author Commented:
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.
0
Chris StanyonWebDevCommented:
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.
0
8042981Author Commented:
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.
0
Chris StanyonWebDevCommented:
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.
0
8042981Author Commented:
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.
0
Chris StanyonWebDevCommented:
body { padding-top: 25px; }
.navbar-brand { height: auto; padding 5px 15px; }
.navbar-nav > li > a { padding-top: 5px; padding-bottom: 5px; }
.navbar { min-height: 25px; }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
8042981Author Commented:
Perfect! I had no clue about changing navbar-brand.
0
8042981Author Commented:
PS: the colon is missing after padding in the 1st line. No big deal.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.