css - bootstrap navbar collapsing social icons on top of one another -

I want a new navbar which has an open element on the right side of my social media link and icon. The problem is that the Bootstrap Navbar does not work:

When the browser window collapses, the social media icon and the link stack above the collapsed icon (right).

html:

  & lt; Nav class = "navbar navbar-default" & gt; & Lt; Div class = "container-liquid" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#ss-example-navbar-fall-1" & gt; & Lt; Span class = "sr-only" & gt; Toggle Navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; I class = "fa fa-2x fa-comment" & gt; & Lt; / I & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; I class = "fa fa-2x fa-facebook" & gt; & Lt; / I & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; I class = "fa-fa-2x-fa-tweeter" & gt; & Lt; / I & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; Div class = "navbar-brand" & gt; & Lt; Img alt = "PG logo" src = "http://newsinteractive.post-gazette.com/hbcu/img/PGLogoTwitter_2_10_12_bigger.gif" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; H1 class = "navbar-text" & gt; Header here & lt; / H1> & Lt; Div class = "fall navbar-fall" id = "bs-example-navbar-collapse-1" & gt; & Lt; Ul class = "nav navbar-nav navbar-right" & gt; & Lt; Li & gt; & Lt; I class = "fa fa-2x fa-comment" & gt; & Lt; / I & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "https://www.facebook.com/sharer/sharer.php?u=http://newsinteractive.post-gazette.com/hbcu/" target = "_ blank" & gt; & Lt; I class = "fa-fa-2x fa-facebook" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "https://twitter.com/hashtag/pgHBCU" & gt; & Lt; Strong & gt; #PGHBCU & lt; / Strong> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fnewsinteractive.post-gazette.com%2Fhbcu%2F&text=%23pg HBCU Pittsburgh High School students' Historically Attitudes on Black Colleges (via Pittsburgh PG): and twip = tweetbutton and url = http: //newsinteractive.post-gazette.com/hbcu/ "target =" _ blank "& gt; & Lt; I class = "fa fa-2x fa-twitter" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Neo & gt;  

css

  .navbar {height: 73px; Margin-down: 0! Important; Border: Nobody! 0 important! Background color: Black! Important; color white! Important; } .navbar-brand {padding: 0! Important; } .navbar- brand img (border-right: 2px solid white;} .navbar-text {color: white! Important; font-family: "open breathed conditioned", without-serif! Important; font-weight: bold! Important; }  

Can anyone tell me what I am doing, please?

Here you are going:

Instead of adding it to the Crashing Divisions, you are adding social icons to the button and you will get a height There is a need to specify so that it is your brand name - brand image logo like this:

  .navbar {height: 55px; margin-down: 0! Important; limit: none! 0 important! Background  

Also add your navbar-brand as an anchor instead of a div