How to add row above fixed navbar in bootstrap 4

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

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.


<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="">

etc... as before ....

Then use CSS to stretch the message.

  flex:1 0 100%;

That should get you close :slight_smile:

1 Like

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