I can get the hover effect of the icon over just the font awesome, but not over the complete separate elements. And I want each element to have its original color on hover.
how can I get the right hover effect?
Here is the HTML Code used
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right socialnav">
<li class="twitternav"><i class="fa fa-twitter"></i></li>
<li class="facebooknav"><i class="fa fa-facebook"></i></li>
<li class="instagramnav"><i class="fa fa-instagram"></i></li>
<li class="youtubenav"><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>BODY SCULPTING</li>
<li>Clinical</li>
<!--<li>Testimonials</li>-->
<li>Gallery</li>
<li>PROMOTIONS</li>
<li>Team</li>
<li>Contact</li>
</ul>
And here is the CSS code that I have tried.
.navbar-right .socialnav > li .facebooknav a:hover {
color: #4060A5 !important;
}
.social .fa-twitter:hover {
color: #00ABE3;
}
.social .fa-instagram:hover {
color:#517fa4;
}
.social .fa-youtube:hover {
color:#C31A1E;
}
The website is http://www.hardyhealth.com/ (top bar social media icons)
Any help would be awesome thank you!!!
Try .twitternav:hover .fa { color: #yourcolor; }. And so on.
Related
I'm rebuilding a new website and upgrading from Bootstrap 3.3 to Bootstrap 5. I'm re-creating the look and feel of the navbar seen here. I've gotten very close but am having trouble with the banner. I can't figure out how to get the banner to extend below the navbar and still fit within the container class.
Here's a chunk of their code that displays the image I'm also opting to use:
<nav class="navbar navbar-inverse navbar-static-top">
<script src="http://www.utah.gov/nav/fluidheader.js" type="text/javascript" class="utahgov"></script>
<div class="container">
<img src="root/images/purpleLogo.png" class="purpleLogo" />
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li class="dropdown">
HOME<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li >Division Home</li>
<li>Oil and Gas Program Home</li>
</ul>
</li>
<li>FORMS</li>
<li>STATISTICS</li>
<li>WELL FILES</li>
<li class="dropdown">
QUICK REFERENCES<span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Well Bonding</li>
<li>Drilling Permits</li>
<li>Drilling a Well</li>
<li>Operator Changes</li>
<li>Reporting</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
It looks like all they're doing is putting the image in the same container as the navbar items and the banner is automatically spilling out of the navbar. So far, I have the navbar elements in their own row. Then I divided the banner from the navbar items using columns. However, since the banner is inside the navbar class, it extends the navbar too low.
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
margin-bottom: 15px;
}
.homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
.purpleLogo{
position: absolute;
z-index: 2;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<div class="row">
<div class="col-2">
<img id="purpleLogo" src="https://www.ogm.utah.gov/coal/images/purpleLogo.png" />
</div>
<div class="col-10">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>Division Home</li>
<li>Oil and Gas Program Home</li>
</ul>
</li>
<li class="nav-item dropdown">
ABOUT US
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>About Us</li>
<li>Mission Statement</li>
<li>Responsibilities</li>
</ul>
</li>
<li class="dropdown">
DATA RESEARCH CENTER
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Data Research Center Home</li>
<li>Data Explorer</li>
<li>LiveData Search</li>
<li>Electronic Reporting</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="dropdown">
QUICK REFERENCES
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Well Bonding</li>
<li>Drilling Permits</li>
</ul>
</li>
<li class="dropdown">
OTHER LINKS
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Oil and Gas Associations</li>
<li>For Students and Teachers</li>
<li>Utah DNR</li>
<li>Utah.gov</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I was able to solve my problem. There were a couple of things I had to do:
I ended up not needing to use the row class nor the column classes.
In my styles.css file, purpleLogo was labeled as a class when it was supposed to be an id.
I had to give #navbarSupportedContent a left margin of 224px so the navbar links didn't overlap the banner.
I had to give #purpleLogo a top position of 0px.
I had to remove the .img class and assign these properties to individual ids.
#homeBanner{
display: block;
margin-right: 0;
margin-left: 0;
z-index: 1;
width: 100%;
}
#purpleLogo{
position: absolute;
top: 0px;
}
#navbarSupportedContent {
margin-left: 224px;
}
.hover:hover{
background-color: #754775;
}
.hover a{
text-decoration: none;
}
.navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
a.nav-link.dropdown-toggle.show {
background-color: #78496a;
transition: none;
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
font-size: 14px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: #f5f5f5;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<img id="purpleLogo" src="https://minerals.ogm.utah.gov/images/purpleLogo.png" />
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">HOME</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li >Division Home</li>
<li>Oil and Gas Program Home</li>
</ul>
</li>
<li class="nav-item dropdown">
ABOUT US
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>About Us</li>
<li>Mission Statement</li>
<li>Responsibilities</li>
<li>Staff</li>
<li>Emergencies</li>
<li>Email Us</li>
<li>O&G Facts</li>
</ul>
</li>
<li class="dropdown">
DATA RESEARCH CENTER
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Data Research Center Home</li>
<li>Data Explorer</li>
<li>LiveData Search</li>
<li>Electronic Reporting</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/forms.php">FORMS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/statistics.php">STATISTICS</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-files/files-main.xhtml">WELL FILES</a></li>
<li class="nav-item"><a class="nav-link" href="https://oilgas.ogm.utah.gov/oilgasweb/live-data-search/lds-logs/logs-main.xhtml">WELL LOGS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/noticesAndUpdates.php">NOTICES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/rules.php">RULES AND STATUTES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/publications.php">PUBLICATIONS</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/wellSpacingBoardOrders.php">WELL SPACING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/mapResources.php">MAP RESOURCES</a></li>
<li class="dropdown">
QUICK REFERENCES
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Well Bonding</li>
<li>Drilling Permits</li>
<li>Drilling a Well</li>
<li>Operator Changes</li>
<li>Reporting</li>
</ul>
</li>
<li class="dropdown">
OTHER LINKS
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Oil and Gas Associations</li>
<li>For Students and Teachers</li>
<li>Government Agencies</li>
<li>Industry Information and Research</li>
<li>Oil and Gas Pricing</li>
<li>Some of Utah's Top Oil and Gas Producers</li>
<li>DOGM Board Members</li>
<li>Utah DNR</li>
<li>Utah.gov</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/orphanWells.php">ORPHAN WELL PROGRAM</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/aboutUs.php#emergencies">EMERGENCIES</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/permittingReview.php">PERMITTING</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:1234/Utah_OG_Website/inspectionsReview.php">INSPECTIONS</a></li>
</ul>
</div>
</div>
</nav>
<img id="homeBanner" src="https://minerals.ogm.utah.gov/images/MINERALSmainSmall.jpg" />
I have a standard bootstrap navbar, that collapse on mobile. Here below the code, for your reference:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu with dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu voice 1</li>
<li>Submenu voice 2</li>
<li>Submenu voice 3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I would like, after clicking on the hamburger menu on mobile, to get directly the 3 <li> "Submenu voice x" and hide the parent <li> (class="dropdown").
How can I achieve this result? Thank you
You can use CSS for this:
#media (max-width: 767px) {
.navbar-nav .dropdown-menu {
display: block;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-toggle {
display: none !important;
}
.navbar-inverse .navbar-nav .dropdown-menu > li > a {
color: #9d9d9d;
}
}
CODEPEN
I had to add the below to .navbar-nav .dropdown-menu in order to make it work.
opacity:1;
visibility: visible;
Try below code.
HTML:
<nav class="main-menu navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent1">
<ul class="navigation clearfix">
<li class="current dropdown"><a routerLink="/">Home</a>
</li>
<li class="dropdown">About
<ul class="dropdown-menu">
<li>Company Overview</li>
<li>Vision Mission</li>
<li>Ethics & Core Values</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS:
.dropdown:hover > .dropdown-menu{
display: block;
}
I'm building a site using the Bootstrap (3.2.0) and I have a button on my page that I'd like to trigger a "dropdown" menu style effect however instead of having the menu expand downward from the button I'd like it to slide out of the right side. The "dropdown" menu items would still be stacked vertically just like normal but instead of having the top of the menu connected to the bottom of the button, the upper-left side of the menu would be connected to the upper-right side of the button.
sounds like a great idea is an example of a side by side nav, i found on the net. http://www.bootply.com/uBVgiR9DDd
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
<ul class="nav">
<li class="dropdown"> <a class="" href="#" data-toggle="dropdown">Dropdown Heading</a>
<div class="dropdown-menu multi-column">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<ul class="dropdown-menu">
<li><a class="" href="#">Col 1 - Opt 1</a>
</li>
<li><a class="" href="#">Col 1 - Opt 2</a>
</li>
</ul>
</div>
<div class="span6">
<ul class="dropdown-menu">
<li><a class="" href="#">Col 2 - Opt 1</a>
</li>
<li><a class="" href="#">Col 2 - Opt 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
I use bootstrap ver 3.
When I'm scrolling down, I want my menu bar set to top of the page.
screenshot:
My start page when loading show my logo in center & my menu bar in bottom of logo.
Height of page 500px
my menu cod:
<div class="navbar-inverse navbar-default navbar-static-top" role="navigation" > <!-- منو بالا -->
<div class="container my-menubar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">صفحه اصلی</li>
<li>محصولات</li>
<li>درباره ما</li>
<li class="dropdown "> خدمات <span class="caret"></span>
<ul class="dropdown-menu my-menubar" role="menu">
<li>خدمات 1</li>
<li>خدمات 2</li>
<li>خدمات 3</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /container -->
</div>
please watch below link :
http://chuckagency.com/wordpress-new/
i want create like this.
Add two attributes below class
.navbar-static-top {
top: 0px;
position: fixed;
}
You can use some javascript like the below to add a class to your menu once you have scrolled down enough.
var listval = $('.section-nav-bar-menu')[0].offsetTop;
$(document).scroll(function() {
var topval = $(document).scrollTop();
if(topval >= listval){
$('.section-nav-bar-menu').addClass('fixed');
} else {
$('.section-nav-bar-menu').removeClass('fixed');
}
});
});
Then you can use CSS to fix the menu bar to the top of the page using the "fixed" class.
There are probably many different implementation of this code, so look around and see what works best for you...
$(window).scroll(function () {
if ($(window).scrollTop() >= 450) {
if ($('.navbar-default').hasClass('navbar-static-top')){
$('.navbar-default').removeClass('navbar-static-top');
$('.navbar-default').addClass('navbar-fixed-top');
}
}
else {
if ($('.navbar-default').hasClass('navbar-fixed-top')){
$('.navbar-default').addClass('navbar-static-top');
$('.navbar-default').removeClass('navbar-fixed-top');
}
}
});
How to?
Fixed navbar at center, but without background color at the sides.
The width of the navbar should be as that of the container and then the background color of the navbar to the sides of the container (which contains it) you should not see.
Any idea?
Furthermore the navbar must downsize at the resize of the width of the container, and then of the page: so rensponsive navbar!
How to?
Thanks in advance.
Fix the default navbar from: http://getbootstrap.com/examples/navbar/
wrap the navbar in its own .container div and wrap this div in an other div you fix:
#fixme {position: fixed;left: 0;right: 0; top:0;}
/* prevent overlap */
body{padding-top:70px;}
html
<div id="fixme">
<div class="container">
<!-- your navbar here -->
</div>
</div>
Other example One way to do this (there will be many others). Take static navbar example from: http://getbootstrap.com/examples/navbar-fixed-top/
The navbar code already contains a div with class container which wraps the navbar content and set the width for the different grids (so content is responsive) already.
The 100% width "effect" is set by a background color (and border) of the .navbar-default class (set 100% width by the .navbar-fixed-top left: and right both 0).
Remove this background and border:
.navbar-default {
background-color:transparent;
border: none;
}
After this the navbar it self do not have a background color. To solve wrap your nav bar inside a extra div (inside the .containter div) and apply a background color on it:
.navbar > .container > div
{
background-color: pink;
}
When you apply this background on the .container without the extra div your background will 15px wider then your content on both sides due to the gutter of the grids (padding).
Example: http://bootply.com/79742
html:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Im using the last version of Bootsrap and i had to override the "navbar-default" class like this :
.navbar-default{
background-image: none;
-webkit-box-shadow: none;
border-style : none;
background-color: white; // the color i chose
}
The result is my navbar has no more border/background style, and i can finally apply mine in my div ! (phewww)
I was struggling with the same issue. I solved it by adding some jquery that makes the ".navbar" the same width as the ".container".
$(document).ready(function () {
var siteWidth = $('.container').width();
$('.navbar').width(siteWidth);
});