asked    Agnes     2018-10-22       html       7 view        4 Answers

[SOLVED] Bootstrap image stuck to top of screen

For a class I have to create a website that has a picture right below the navigation bar, but for some reason that I can't figure out, the picture is displaying within the navigation bar and not below it. Could someone please explain why this is happening and how to fix it? Thanks

<div class="row">
 <nav class="navbar-fixed-top">
   <div class="container-fluid">
    <div class="navbar-header">
    <ul class="nav navbar-nav" id="mainNav">
        <li><a href="">Locations</a></li>
        <li><a href="">Special Events</a></li>
        <li><a href="">Breakfast</a></li>
        <li><a href="">Lunch</a></li>
        <li><a href="" class="active">Liam's Food Fusion</a></li>
        <li><a href="">Dinner</a></li>
        <li><a href="">Apps and Extras</a></li>
        <li><a href="">Online Ordering</a></li>
        <li><a href="">Contact Us</a></li>

    </ul>
  </div>
    </div>
</nav>
  </div>
 <!--    end navigation  -->
 <div class="row">
  <div class="container-fluid">
   <div class="col-md-4" id="logopic">
    <img src="" />
</div>
</div>
</div>

  4 Answers  

        answered    Rita     2018-10-22      

The position:fixed that the class navbar-fixed-top has causes the nav element to site above (think 3D) everything on the page. So whats happening to the image is that it's sitting at what it thinks is the top of the page with the the navbar over the top.

So pretty much you can just remove the .navbar-fixed-top class from the nav element or add a margin top to the div surrounding the content following the nav bar (in this case <div class="row">.

Heres a Codepen with an example.



        answered    Jeffrey     2018-10-22      

navbar-fixed-top's css is using absolute positioning to place it at the top of everything else. Using absolute positioning in css doesn't push other containers below it, it simply positions itself above them.

If you want to move the next div down, you can add padding or margin to it equal to the navbar's height if you know it, or by using relative positioning instead of absolute.

Looking at the Inspect of this bootstrap example might help you understand . Notice the body tag in Fixed Top example has a top padding. The Static Top example the body does not have padding top because the navbar is placed using relative positioning instead of absolute positioning.



        answered    Enoch     2018-10-22      

Since the navbar is using the "navbar-fixed-top" class, it is fixed and therefore does not affect the placement of other elements. What you should do is add a margin to the top of image or one of its containers. Also, I'm fairly certain you don't need the outside the navigation bar, it may be messing some stuff up.



        answered    Noah     2018-10-22      

I think you need to set your class in the nav element like this:

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

and add the following CSS

body { padding-top: 70px; }

(per docs: )

See demo below:

.body {
  padding-top: 70px;
}
<script src=""></script>
<link href="" rel="stylesheet" />
<script src=""></script>
<link href="" rel="stylesheet" />


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav" id="mainNav">
      <li><a href="">Locations</a></li>
      <li><a href="">Special Events</a></li>
      <li><a href="">Breakfast</a></li>
      <li><a href="">Lunch</a></li>
      <li><a href="" class="active">Liam's Food Fusion</a></li>
      <li><a href="">Dinner</a></li>
      <li><a href="">Apps and Extras</a></li>
      <li><a href="">Online Ordering</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </div>
</nav>
<!--    end navigation  -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <img src="" />
    </div>
  </div>
</div>




Your Answer





 2018-10-22         Alberta

Using DataTables with momentjs in Angular 6 gets fn.dataTable.moment is not a function

so I'm kinda frustraded since this issue seems so simple but yet i can't seem to fix it.I'm using a DataTable (which works fine) - now i want to make a column containing dates sortable by the german date format dd.MM.yyyy.I found the documentation on the datatables homepage: https://datatables.net/blog/2014-12-18But when i try to use the plugin it gives me this error:core.js:1673 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__.fn.dataTable.moment is not a function at help.component.ts:82 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke...
 jquery                     3 answers                     89 view
 2018-10-22         Virgil

jooq returns date without time for Oracle

I’m using Jooq v3.1.0 and have a problem with Oracle Date column. An Oracle procedure called by Jooq returns only date info without time (e.g.: “31.08.2018”. I expected “31.08.2018 18:44:05”)I tried the following workaround<database> <!-- Use this flag to force DATE columns to be of type TIMESTAMP --> <dateAsTimestamp>true</dateAsTimestamp> <!-- Define a custom binding for such DATE as TIMESTAMP columns --> <forcedTypes> <forcedType> <userType>java.sql.Timestamp</userType> <binding>org.jooq.impl.Da...
 java                     1 answers                     86 view
 2018-10-22         Walter

Display formatted DateTime inside ObservableCollection

Into DataGrid I have 2 column: public string DayName {get; set;} public DateTime DateTimeColumn {get; set;}I want to display data as below:DayName | DateTimeColumn Monday | 2018-09-03 Tuesday | 2018-09-04 Wednesday | 2019-09-05 ....To do that I have method:public static ObservableCollection<MyDataConcept> BuildDataConceptList(int year, int month){ ObservableCollection<MyDataConcept> resultList = new ObservableCollection<MyDataConcept>(); foreach (var data in GetDates(year, month)) { if (data.DayOf...
 c#                     1 answers                     85 view