Twitter Bootstrap Question posted in

Twitter bootstrap – Changing the size of Bootstrap's standard navbar to a smaller size

I am trying to change the size of Twitter Bootstrap’s standard navbar to a smaller size. Inside the navbar, I want the Brand/logo on the left, a few menu options in the center, and some social media icons on the right.

I’ve got them lined up fine so far, and I’ve been able to make it smaller… however, when the screen is reduced to a smaller size (say, mobile phone, etc) the social icons are positioned to the right of the menu options, and it just doesn’t look good.

What am I missing in the CSS/HTML that is making the social icons not position below the menu options?

Here is a link to what I have accomplished so far to view the source: http://trevormcgrath.com/navbartest/smallnavbar.html

I’d really appreciate any help anyone can give me here! Thank you in advance.

Tags:

2

Answers


  1. 0

    There are a lot of ways to accomplish what you are describing.

    Just based off my initial eye-balling of what you’re trying to do: the social icons that are giving you issues are inside of a separate <ul> than the links that are behaving correctly.

    Play around with using one <ul> maybe. Also note that javascript changes the layout so simple css/better markup won’t be the total answer.

    Login or Signup to reply.
  2. 0

    Set display: block; for the icons <ul> and then use media queries to style it as you wish.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search