Fb-Like Button on Nav-Bar Right Menu Hangs off Screen When Screen Exceeds 768

Question

Bootstrap newbie question. I am using a variation of ZimSystem's Left-Center-Right Aligned NavBars. I put my Brand on the left.

There are two seemingly related problems.

1) On large screens the fb-like button hangs off the right-hand side of the page.

2) On small screens, the Brand is moved down a couple lines so that the first menu item is concealed by it.

I have tried using absolute positioning in both cases, but that did not resolve the issue.

    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <!-- navbar-default removed -->
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button>
      </div>
    <a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>

<!-- Collect the nav links, forms, and other content for toggling -->
     <div class="navbar-collapse collapse">
     <ul class="nav navbar-nav navbar-center">
         <li class="nav-item"> <a class="nav-link" href="#philosophy">Our Philosophy</a> </li>
    <li class="nav-item"><a class="nav-link" href="#priceList">Price List</a>.   </li>
        <li class="nav-item"><a class="nav-link" href="#contactus">Contact Us</a>.   </li>
      </ul>

       <ul class="nav navbar-nav navbar-right">
        <div class="fb-like" data-href="http://www.kokleaners.com" data-layout="button_count" data-action="recommend" data-adapt-container-width="true" data-show-faces="false" data-share="true"></div>
      </ul>

    </div>
</nav>

CSS

@charset "UTF-8";
/* CSS Document */

html, body{
    height:100%;
}
.navbar-default {
  background-color:#72c5d5;
  border-color: #284449;
  z-index: 10;
  opacity: 0.9;
}

.nav.navbar-nav.navbar-center li a {

    color: #254053;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
    color: #EF3927;
}

Here is the code I used for the fb like positioning that did not work.

@media all and (min-width:768){

        .navbar-collapse fb-like{
        position:absolute;
        right:25;

Seems like this should be a pretty simple fix. But I am perplexed.

Here is the bootply.

score 0 · Accepted Answer · edited Dec 14 '17 at 19:56

0

Next time put it on jsfiddle.net

Replace your facebook div widget with this and it should do the trick. Your width was awkwardly set. So I changed it to 100% and it formatted properly.

 <div class="fb-like fb_iframe_widget" data-href="http://www.kokleaners.com"  
 ... " class="" style="border: none; visibility: visible; **width: 100%**; height: 20px;"></iframe></span>

        </div>

The problem with the navbar-brand spacing was resolved by moving its placement into div.

See comments below for clarification.

edited Dec 14 '17 at 19:56

PhillipOReilly

609
12
28

answered Dec 13 '17 at 20:19

krizpers

97
10

thanks. That is, however, a some enigmatic code! Is there a short explanation as to what that does? – PhillipOReilly Dec 13 '17 at 20:26
@PhillipOReilly I honestly have no Idea what that code does as it seems like a widget or something that you have added into your file. All I did was change the width. It was originally set at something like "1010px" which means that it will be forced to have a width of "1010px" at all costs(meaning it hangs off the screen). So what I did was change it to "100%" that tells the browser to put it at 100% of the available space. Which tends to keep things in check as it is more responsive than defining the pixels. – krizpers Dec 14 '17 at 15:36
Got it. I will mark yours down as the correct answer. I have edited it to reflect the answer to the second problem. Thanks. – PhillipOReilly Dec 14 '17 at 18:41

score 0 · Answer 2 · answered Dec 14 '17 at 18:53

The spacing of the FB-Widget can also be resolved by setting the margins for navbar-right in custom CSS.

.navbar-right{
margin-top: 20px;
margin-right:20px;
}

To improve layout on small screens, move up navbar-brand as so:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
  </div>

Fb-Like Button on Nav-Bar Right Menu Hangs off Screen When Screen Exceeds 768

2 Answers2