CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
oneguy
oneguy

Reputation: 13

How can I increase the height of the Navbar

I'm trying to use mostly bootstrap for a webpage and I'd like to increase the elements of the Navbar. Has anyone a suggestion for me how to do so?

    .navbar {
  min-height:100px;
}

when I do it like so, the clickable elements remain the same size.

any suggeston to scale it?

thank you for your help

Upvotes: 1

Views: 6089

Answers (3)

Tariq B.
Tariq B.

Reputation: 573

You cannot just increase the size of a navbar in Bootstrap by directly targeting the parent element by css.

In order to increase the height of the navbar, you have to increase the size of the children > li > a. Keep in mind that the children already have vertical padding of 15px.

.navbar .navbar-nav > li > a {height: 100px; //Whatever you are targetting}

Upvotes: 0

neophyte
neophyte

Reputation: 6626

You can't increase the size of inner elements just by increasing the height of the navbar.

You have to do it either like this--

.navbar .navbar-nav > li > a {
line-height: 45px;
 }

or like this

.navbar .navbar-nav > li > a {
padding: 27px 15px;
}

Upvotes: 5

user7601056
user7601056

Reputation:

Maybe:

.navbar {
  min-height: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
}

or

.navbar {
  min-height: 200px !important;
  height: 200px !important;
  max-height: 200px !important;  
  overflow: hidden;
}

Upvotes: 0

Related Questions