0

i want to know if it's possible with bootstrap, to create the header with the logo and others informations, and then the navigation bar. But the logo won't be fixe, only the navagation bar will be when it will be at the top of the page. Here an example of header i'm trying to do with bootstrap

qltmi
  • 11
  • 1

2 Answers2

0

This partly depends on what you mean by "Header".

Often the "jumbotron" class is used as a header like this:

<div class="jumbotron"><img src='logo.png'>My Cool Company</div>

And the navigation bar is an independent element, specifically a navbar. It can be fixed on the page (scrolls with content) or Static on the screen (stays at the top or bottom)

Nabber example (always at the top):

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</nav>

You can find the other details on the Bootstrap page for Navbar:
Bootstrap Components navbar Placement

And the placement in this example is "navbar-fixed-top" so that it stays at the top of the screen, even when scrolling.

You may also want the navigation under the header, and want both to scroll until the navbar hits the top of the screen where it would then be fixed at the the top. This is sometimes called a sticky navbar. It can be done with jQuery, but at this time, I don't know of a way in Bootstrap without adding custom javascript.

Sticky Menu in jQuery - answer

If you do want the second option, without jQuery, ask another question on how to use Javascript switch from Fixed to Static when scrolling past the top of the screen.

Community
  • 1
  • 1
Sky Notify
  • 859
  • 6
  • 4
0

thank you for your answer, but i think it s not my question, and i think my solution is not related to jumbotron.

if you look at the link i have give below, you can see that the logo of the site (w3school.com) is on the top when we are on the top of the page. when we scrool down, this logo will disapear and only the nav bar (home, html, css, ...) will stay at the top.

qltmi
  • 11
  • 1