*I am facing an issue where the default bootstrap navbar style appears before my custom styles get applied every time I reload the page. Any assistance would be greatly appreciated*- Whenever I reload the page, the default bootstrap navbar style appears before my customized styles are applied. Any help is welcome
Using bootstrap 4, below is my index.html file with custom CSS:
Head
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/75528e6985.js"></script>
<link rel="stylesheet" href="css/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
Style
.selector-for-some-widget {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
body {
background: #e9ebee;
}
.logo {
background-color: rgba(18, 101, 204, 0.82);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 7px;
padding-right: 7px;
font-size: 29px;
font-weight: bold;
border-radius: 11px;
}
a .navbar-brand {
color: #baccce!important;
}
.pull-right {
margin-right: 150px;
}
.bookUs-btn {
color: #5d85b7;
margin: -56px 88% 29px;
border-color: #5d85b7;
font-weight: bold;
}
.bookUs-btn:hover {
background-color: #5d85b7;
}
.navbar-nav {
margin-right: 20%!important;
}
Nav
<nav class="navbar navbar-dark bg-light bg-faded" style="background: #172944;" role="navigation">
<div class="container">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">
<span class="logo">K
</span>
OMRIHE
</a>
<ul class="nav navbar-nav pull-right">
<li class="nav-item ">
<a class="nav-link" href="#">PORTFOLIO
<span class="sr-only">(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT ME
</a>
</li>
</ul>
<span class="">
<button class=" btn btn-primary-outline bookUs-btn">
<i class="fa fa-phone-square">
</i> Contact Me
</button>
</span>
</div>
</div>
</nav>