CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user2811630
user2811630

Reputation: 475

Trying to get a shorter navbar with correctly scaling navbar-brand offset

I just can't figure out a way to implement a shorter navbar with correctly scaling navbar-brand offset.

When I try to use a percental value for the max width or the margin-right of the navbar it completely disturbs the offset of the navbar-brand.

When I try to use a fixed value for the margin-right and then try to change the margin-left from the .navbar > .container .navbar-brand I get better results but sometimes the .navbar-brand makes a short jump.

Here I have the bootply code with my two different tries. http://bootply.com/86804 I hope someoen can help me.

Upvotes: 1

Views: 530

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

update

Between a screen width of 768 en 991 pixels (the small grid) i find this:

enter image description here

Is the above what you call a jump?

Possible solutions:

  1. set your grid breaking point to 991px
  2. only apply the margin-right:100px; of your .navbar-else above the 991px

  3. add a break in your.nav-brand:

    @media (min-width: 768px) and (max-width: 991px) {

    .navbar-brand > strong:after { content:"\a"; white-space: pre; }

    }

  4. make your font smaller below 992 px

etc.

--end update The examples on http://getbootstrap.com/components/#navbar don't wrap the .navbar-header in a .container.

Try to set:

.navbar
{
   width:50%;
}
.navbar-header
{
   padding-left:80px;
}

see: http://bootply.com/86839

Upvotes: 0

Related Questions