'Conflict my CSS with inbuilt Bootstrap CSS

I have added my own marquee and related css in our website, but when I make that top bar with marquee position as fixed, So it will disturb my header CSS

Website URL: https://timesandtrendsacademy.com/. And when I am trying to make that Top-bar as a Sticky, So it will affect with my header css code and not showing properly.

#top-bar{

background-color:#ef4d3b !important;
font-family: roboto,sans-serif !important;
position:fixed !important;
width:100%;
}
#top-bar p{
font-size: 16px;
color:#fff;
text-align:center;
vertical-align: middle;
padding-top:2px;
}
.btn-primary{
background-color:#000;
color:#fff;
border: 1px solid #fff;
}
<div id="top-bar">
                <p>
                	<marquee onmouseover="this.stop();" onmouseout="this.start();">
                		<span>TTA's B.Sc In Fashion Designing Course Is Now Affiliated with Savitribai Phule Pune University</span>
                		<span><a href="http://www.ttafashioncollege.com/" class="btn btn-primary" role="button" target="_blank">Apply Now</a></span>
                	</marquee>
                </p>

</div>

To avoid confliction with css, What will be the full clean code.

htmlcsswordpress


Solution 1:[1]

I think easiest solution would be like this:

#top-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 34px;
    z-index: 2;
}

body {
    margin-top: 34px;
}

This should make #top-bar appear on top and all other content is pushed down by the height of #top-bar. Also do not forget the z-index: 2 as you don't want other content to cover your #top-bar

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maros D.

Related Questions