How to add row above fixed navbar in bootstrap 4

HTML & CSS
1

I have a transparent nav bar (built in bootstrap 4) that’s fixed to the top of the page. When you scroll it becomes a different color. I want to add a full width row (for occasional announcements) to the top, above of the logo and nav links that it 30px in hight.

not sure what I’m doing wrong.

here is a codepen

2

You’ll need to do something like this.

Add the flex-wrap class to the navbar element and then remove your row and col divs for the text. then add a class of rowtop to the p element.

e.g.

<div class="navbar navbar-expand-lg navbar-default navbar-dark fixed-top flex-wrap">
 
 <p class="rowtop white small text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

  <a href="/" class="navbar-brand">
    <img src="http://placekitten.com/200/100">
  </a>

etc... as before ....

Then use CSS to stretch the message.

.rowtop{
  width:100%;
  flex:1 0 100%;
  color:#fff;
}

That should get you close :slight_smile:

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.