I have a Navbar already built for an Angular site which is using Bootstrap 4, which looks like this
I'm trying to copy this Navbar design for another website which is using Bootstrap 3. I initially looked at seeing if i could just some CSS from the Bootstrap 4 version so it would work with version 3, but that was proving to be a headache so i just thought id start from scratch.
This is what i currently have for the Bootstrap 3 version, but im struggling to fix the column positioning.
Can anyone make a suggestion for fixing the positions of the 2 columns in the Bootstrap 3 so it looks very similar to the Bootstrap 4 version? I also have a problem with the Collapse (mobile view nav) not working atm.
<style>
html {
font-size: initial;
padding: initial;
}
img {
max-width: 180px;
/* width: 100%;
height: auto; */
}
.container-fluid {
max-width: 1440px;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-data-toggle:active {
pointer-events: none;
}
.drop-nav {
margin-top: 3px;
}
.fa-person {
line-height: 0.5em !important;
}
body {
font-family: Montserrat,sans-serif;
/* line-height: 1.5; */
}
/* NEW */
.ceda-nav-border {
border-bottom: 1px solid #e11837;
}
a:hover {
color: #252932;
text-decoration: none;
}
.nav-link {
padding-left: 1.25rem;
padding-right: 1.25rem;
font-size: .875rem;
font-weight: 600;
line-height: 2rem;
color: #252932;
}
.nav-item {
list-style-type: none;
}
.li .nav-item {
font-size: .875rem;
color: #000;
line-height: 2rem;
}
.dropdown-item {
color:#252932;
padding: 5px;
width: 100%;
white-space: nowrap;
background-color: transparent;
padding: 0.25rem 1.5rem;
}
.dropdown-divider {
margin-bottom: .25rem !important;
margin-top: .25rem !important;
background-color: transparent !important;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
.dropdown .dropdown-menu a {
/*padding: 1rem; */
font-weight: 600;
font-size: .875rem;
}
.dropdown .dropdown-menu a:hover:before {
border-radius: 10px;
width: 10px;
height: 10px;
/* background-color: rgba(225,24,55,var(--bg-opacity)); */
color: #e11837;
content: "";
display: inline-block;
margin-right: 7px;
}
.w-105 {
width: 105%;
}
.w-110 {
width: 110%;
}
.w-120 {
width: 120%;
}
.w-130 {
width: 130%;
}
.w-175 {
width: 175%;
}
.w-185 {
width: 185%;
}
</style>
</head>
<!-- body -->
<body >
<div >
<div style="background-color: #fff;>
<nav >
<div >
<!-- Brand/logo -->
<div >
<button type="button" data-toggle="collapse" data-target="#example-1" aria-expanded="false">
<span >Toggle navigation</span>
<span ></span>
<span ></span>
<span ></span>
</button>
<a href="#">
<img src="https://events.ceda.com.au/App_Themes/CEDA2020/ceda-logo.png" alt="CEDA Logo">
</a>
</div>
<!-- Large screen Navbar -->
<div id="example-1">
<div >
<div >
<ul >
<li style="background-color: #A5BB29;">
<a href="#">Join CEDA</a>
</li>
<li >
<a href="#">Sign in</a>
</li>
<li >
<a href="#">Support us</a>
</li>
<li >
<a href="#">Contact</a>
</ul>
</div>
<div >
<ul >
<li >
<a href="#">Research and policy</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="https://www.ceda.com.au/research-and-policy/Current-research-focus">Current research focus</a>
<div ></div>
<a href="https://ceda.com.au/ResearchAndPolicies/Research">Research</a>
<div ></div>
<a href="https://ceda.com.au/research-and-policy/Pulse-polling-survey">Pulse polling surveys</a>
</div>
</li>
<li >
<a href="#">Membership</a>
</li>
<li >
<a href="#">CEDA Learning</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="https://www.ceda.com.au/Learning/Public-Policy-Dynamics">Public Policy Dynamics</a>
<div ></div>
<a href="https://www.ceda.com.au/Learning/Copland-Leadership-Program">Copland Leadership Program</a>
</div>
</li>
<li >
<a href="#">Events and programs</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a >Upcoming events</a>
<div ></div>
<a >Past events</a>
<div ></div>
<a href="https://www.ceda.com.au/ResearchAndPolicies/Research/Economy/environmental-social-and-governance">ESG Community</a>
</div>
</li>
<li >
<a href="#">News and resources</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="https://ceda.com.au/News-and-resources/News">News</a>
<div ></div>
<a href="https://ceda.com.au/News-and-resources/MediaReleases">Media release</a>
<div ></div>
<a href="https://ceda.com.au/News-and-resources/Opinion">Opinion articles</a>
<div ></div>
<a href="https://ceda.com.au/News-and-resources/Podcasts">Podcasts</a>
<div ></div>
<a href="https://ceda.com.au/News-and-resources/MediaMentions">Media mentions</a>
<div ></div>
<a href="https://ceda.com.au/News-and-resources/VideosAndPhotos">Videos and photos</a>
</div>
</li>
<li >
<a href="#">About</a>
<div aria-labelledby="navbarDropdownMenuLink">
<a href="https://www.ceda.com.au/About/Our-Story">Our Story</a>
<div ></div>
<a href="https://ceda.com.au/About/Our-People">Our People</a>
<div ></div>
<a href="https://www.ceda.com.au/About/Annual-reports">Annual Reports</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
CodePudding user response：
First, you are missing a quotation mark at <div style="background-color: #fff;>. Adding it (... #fff") already results in the following view:
However, the view depends on the width of the page: As soon as the width is too low, the brand breaks the layout. This is caused by both the number of items in your second navbar and your brand logo. A dirty fix for reducing this effect is defining the height of your logo with 1px like <a href="#" style="height: 1px;">. The result would look like this:
Regarding the mobile navbar: The collapse button is not visible, even though it exists, see here:
You could add:
.icon-bar {
background: black;
}
and it will be shown. And it works, too:
For testing purposes, I created a fiddle. Maybe this helps to adjust the solution even further.
Good luck!