2

I'm trying to get a brand text + menu on the top of my website to scale in font size as the window is bigger/smaller, the same way the rest of the bootstrap content (e.g. h1, p) is doing. What would be the best way to do this?

Also when the window is small i'd still want to display the menu items next to eachother instead of under eachother, for as long as possible. But I can't figure out how to use the col-md rules within the navbar elements. Should this be done in another way?

Another issue I'm having, i'd like to use container-fluid for the nav bar so that it completely aligns the items to there right side of the screen, but it doesn't seem to work in combination with the text-right that I'm using, just gets messed up. Any tips here or better method to reach all of these 3 goals?

My code currently looks like:

<nav class="navbar navbar-inverse navbar-fixed-top">

            <a class="navbar-brand" href="#">Thonis</a>

        <div class="container text-right">  <!-- Fluid seems to break the menu on mobile, how to fix? -->

            <ul class="nav navbar-nav navbar-right">
                <li><a class="active" href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </div>
    </nav>

See wip/demo here http://www.antoniothonis.com/thonis/

Thonis
  • 21
  • 3

2 Answers2

0
  1. scale font size with window with

Take a look at this post: Font scaling based on width of container

  1. do not collapse unless necessary

On bootstrap website: http://getbootstrap.com/components/#navbar-default at the Overflowing content, they mention this:

Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

  1. menu items full align right

You can make a class container-full as described here: 100% width Twitter Bootstrap 3 template

Community
  • 1
  • 1
mloureiro
  • 957
  • 1
  • 12
  • 34
0

Use CSS media queries! http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Question #1, e.g.:

@media screen and (max-width: 480px) {
    nav a {
         font-size:80%;
    }
}

Or instead of %'s, use rem instead for defining font-size: https://snook.ca/archives/html_and_css/font-size-with-rem.

Use the same method for Q2:, e.g.:

@media screen and (max-width: 480px) {
    nav .navbar-nav li {
         float:left;
    }
}
Robin
  • 443
  • 5
  • 18