Centering and Positioning Bootstrap Brand and Navbar responsively

Question

I have been working on trying to get a bootstrap navbar that is centrally aligned and on which the brand remains centered after collapse. Exactly like the below:

[Original Stack fiddle on centering the navbar][1]

Originally from here

However when I do it to my freshly created navbar it seems the brand that is supposed to disappear on larger screens does not and just ends up sitting on top. Mine is below:

[My original fiddle][3]

I suspect its done with media queries but ive tried a few things but come up empty.

Any help is appreciated

Ramiz Wachtler · Accepted Answer · 2014-09-16T18:01:05.230

1

First of all you should add your CSS after the bootstrap.css.

Here is what you will need for proper display:

.hidden-desktop {
     display: none !important;
}
.visible-desktop {
     display: inherit !important;
}
@media (max-width: 979px){
    .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
           padding: 9px 15px;
           font-weight: bold;
           color: #777777;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
           border-radius: 3px;
     }
}
@media (max-width: 979px){
    .navbar .brand {
           padding:10px;
           margin: 0 0 0 -5px;
    }
}
@media (max-width: 767px){
    .hidden-desktop {
           display: inherit !important;
     }
}

EDIT: To hide the first with CSS you would need this one (but it's better to reuse the .visible-desktop class)

Here is the CSS to hide the first-child

@media (max-width: 768px){
    #twitterbootstrap .navbar .nav > li:first-child{
        display: none ;
    }
}

Here is a fiddle

EDIT 2

The .hidden-desktop element should be placed before .navbar-collapse <div>. Furthermore I changed the CSS to this:

@media (max-width: 767px){
      .hidden-desktop {
          display: inherit !important;
          padding: 15px;
          margin: 0 0 0 -5px;
      }
}

+ I've forked & updated your fiddle -> UpdatedFiddle

edited Sep 16 '14 at 18:01

answered Sep 16 '14 at 15:23

Ramiz Wachtler

5,623
2
28
33

Thats wonderful. Now i just have to figure out how to make the first child li disappear on collapse... i figure its something like adding :first-child after the two anchorlink a's in the first media query above in another media query after – Alex Tokolosh Sep 16 '14 at 15:37
1

Actually fixed it without child selectors-max width media queried the previously used .visible-desktop class and set it to display:none; – Alex Tokolosh Sep 16 '14 at 15:48
Incidentally can you please tell me how to correctly include jsfiddle code..... mine look atrocious – Alex Tokolosh Sep 16 '14 at 17:25
You can use the "link" feature in the editor or [ Link description ]( yourlink.com ) in comments (don't forget to remove spaces) – Ramiz Wachtler Sep 16 '14 at 17:46
Thank you so much, but i have just one more question if i can pick your brain... on collapse the .hidden-desktop still sits above the original height of the navbar expanding its height.... im trying to fix it with negative margins on css a tthe moment but am not having much luck. Thank you again im such a newb :) – Alex Tokolosh Sep 16 '14 at 17:48
Are you using my fiddle? – Ramiz Wachtler Sep 16 '14 at 17:49
i made a fiddle http://jsfiddle.net/Tokolosh/n98gcb45 I thought i used all the relevant bits :/ – Alex Tokolosh Sep 16 '14 at 17:52
and now i copied all your code across and it still does it :/ – Alex Tokolosh Sep 16 '14 at 18:08
I cant thank you enough. I shall now go and try and understand inheritance better than I clearly do. I wish I had enough rep to upvote you and hope one day to be a contributor to this site when I learn a little more. Cheers to you, Sir! – Alex Tokolosh Sep 16 '14 at 18:30
I'm glad I was able to help you with your problem :) – Ramiz Wachtler Sep 16 '14 at 18:31
I'm sorry to bother you again Ramis, but I cannot now get the dropdown to work... i didnt want to bother you again but im well and truly stck in the mud now..... I thought it was just jquery not loading correctly but ... apparently not : – Alex Tokolosh Sep 18 '14 at 20:42
You should ask a new question. We shouldn't discuss every problem(not related to this question) in the comment section of this one. – Ramiz Wachtler Sep 19 '14 at 14:25
oops... I forgot i asked you this.... twas fixed :D something something postion relative :P – Alex Tokolosh Sep 20 '14 at 11:52

Centering and Positioning Bootstrap Brand and Navbar responsively

1 Answers1