I'm trying to add a navbar brand image to my website. The the logo does not seem to fit the navbar. Either it is too big or it is too small (when I set the height:100% )
This is my navbar html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
<div class="nav-line"></div>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#services">Services</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#projects">Our Projects</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#whyus">Why Us</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#contact">Contact</a>
<div class="nav-line"></div>
</li>
</ul>
</div>
</div>
</nav>
My navbar css :
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav>li {
position: relative;
}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}
.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
}
I would either use a 500px*536px image or an 551px*76px image. I want the image to be responsive as well. The working version can be viewed here.
Please help me to get the image fixed within the navbar height.
Try this
CSS
.navbar-brand
{
padding: 4px 0px;
height: 80px;
display: block;
float: none;
}
.navbar-brand>img {
display: block;
max-height: 100%;
max-width: 100%;
margin: auto 40%;
}
hope this helps..
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
</script>
<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav>li {
position: relative;
}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}
.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="row">
<div class="col-sm-10 visible-sm visible-md visible-lg">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="col-xs-2 visible-xs">
</div>
<div class="col-xs-8 visible-xs">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="col-xs-2">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<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>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
<div class="nav-line"></div>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#services">Services</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#projects">Our Projects</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#whyus">Why Us</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#contact">Contact</a>
<div class="nav-line"></div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Solution:
.navbar-brand img{
width: 100%;
height: 100px; /*** As per Your Requirement ***/
}
Related
Hey I have a CSS dropdown menu that drops down on hover. Unfortunately its not aligned correctly, directly under "services", but to the right of it.
How would I change it so its aligned correctly? I've been slowly adding and modifying free CSS templates to make a custom website, as I'm no coder and this is all kinda new. I'm a visual learner, so messing around until I can understand it and my way of learning..but for some reason I just can't figure this out, even after reading a bunch and thinking I had it correct.
Any help would be much appreciated!
.navbar-collapse {
text-align: center;
position: relative;
}
.site-header-white .navbar-nav>li>a,
.site-header-white .site-title {
color: #fff;
position: relative;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav>li.active>a,
.navbar-collapse li a:hover,
.dropdown.open>a,
.site-header-white .dropdown.open>a,
.dropdown-menu a:hover,
.dropdown:hover>a,
.dropdown-menu>li>a:focus,
.dropdown-menu li a:hover,
.slicknav_nav>li.active a,
.slicknav_open .slicknav_arrow,
.slicknav_nav>li a:hover {
background-color: transparent;
color: #f13a11;
}
.navbar-toggle {
border-color: #fff;
margin: 0 15px 0 0;
position: relative;
top: -1px;
}
.navbar-toggle:hover,
.navbar-toggle[aria-expanded=true] {
background-color: #fff;
border-color: #000;
cursor: pointer;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle[aria-expanded=true] .icon-bar {
background-color: #000;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-nav .dropdown-menu {
display: inline;
opacity: 0;
visibility: hidden;
border-radius: 0;
min-width: 130px;
border: 0;
border-top: 5px solid #f13a11;
top: 140%;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
}
.navbar-nav li a:hover+.dropdown-menu,
.navbar-nav .dropdown-menu:hover {
opacity: 1;
visibility: visible;
top: 100%;
transition-delay: 0s;
display: inline-block;
}
.dropdown-menu li a {
padding: 5px 15px;
position: relative;
left: 0;
float: left;
}
.dropdown-menu li a:hover {
left: 15px;
position: relative;
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">Services
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>Events</li>
<li>Real Estate</li>
<li>Construction</li>
<li>Damage</li>
</ul>
</li>
<li class="nav-item">
Contact
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</nav>
Use dropright class form bootstrap Framework
<li class="nav-item">Services
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>Events</li>
<li>Real Estate</li>
<li>Construction</li>
<li>Damage</li>
</ul>
</li>
Herewith I have provided a sample reference with your code for dropdown
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}
</style>
.
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About Us
</li>
<div class="dropdown">
<a class="dropbtn">Services</a>
<div class="dropdown-content">
Event
Real Estate
Construction
</div>
</div>
<li class="nav-item">
Contact
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to have a dropdown on a navbar item. It works, but the arrow is over the text of the menu item.
Codepen:
https://codepen.io/ogonzales/pen/QWjmorP
Code
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/support/">Support and Consulting</a>
<a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
<a class="dropdown-item" href="/testimonials/">Testimonials</a>
</div>
</li>
</ul>
<form class="form-inline ml-auto">
Log in
Sign up
</form>
</div>
</nav>
Bonus
I'd like also to put every navbar item more to the right. I know I can do this with CSS, but is there a Boostrap class am I missing?
You ul tag was not closed, I fixed that and answered your bonus question as well.
The reason it was on the over the text because, both the dropdown and the link were within same block, so you have to specify the width for those to fit-in inline, I have just provided 100px under .nav-link{...} and you are free to change that as per you requirement.
To move contents towards right you can have width property for the yellow block(check in my snipppet/fiddle) OR you can provide flex option for the block and use 'justify-content:space-between;`.
View in full screen due to media-query you have used.
.nav-link{
border:1px solid yellow;
margin:5px;
width:100px;
}
fiddle to playground.
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin-bottom: 60px;
/* Margin bottom by footer height */
font-family: 'Poppins', sans-serif;
background: #fafafa;
padding-top: 70px;
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/* Set the fixed height of the footer here */
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
/* NAVBAR TOP */
#top-navbar ul li.active>a a[aria-expanded="true"] {
color: #1f1f1f;
background: #12b556;
}
#top-navbar a:visited {
color: #fff;
}
#top-navbar a:link {
color: #fff;
}
#top-navbar a.subitem:link {
color: #1f1f1f;
}
/* ==== */
/* SIDEBAR */
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #1f1f1f;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #1f1f1f;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #12b556;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a.sidebar-link a[aria-expanded="true"] {
color: #fff;
background: #12b556;
}
a[data-toggle="collapse"] {
position: relative;
}
#navbarCollapse {
border: 1px solid red;
}
.nav-link {
border: 1px solid yellow;
margin: 5px;
width: 100px;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #12b556;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #12b556;
}
a.article,
a.article:hover {
background: #12b556 !important;
color: #fff !important;
}
a.sidebar-link:visited {
color: #fff;
}
a.sidebar-link:link {
color: #fff;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>{% block title %}DjangoX{% endblock title %}</title>
<meta name="description" content="A framework for launching new Django projects quickly.">
<meta name="author" content="">
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<link rel="stylesheet" href="{% static 'css/price.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</head>
<body>
<!--MENU SUPERIOR-->
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/support/">Support and Consulting</a>
<a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
<a class="dropdown-item" href="/testimonials/">Testimonials</a>
</div>
</li>
</ul>
<form class="form-inline ml-auto">
Log in
Sign up
</form>
</div>
</nav>
<!-- FIN MENU SUPERIOR-->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<img src="static\images\elim-logo.png" alt="Ministerios Elim" width="50%" height="50%">
<strong>ELIM</strong>
</div>
<ul class="list-unstyled components">
<li class="">
<a class="sidebar-link" href="#capitulo1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i> Capítulo 1
</a>
<ul class="collapse list-unstyled" id="capitulo1">
<li>
<a class="sidebar-link" href="#">Introducción</a>
</li>
<li>
<a class="sidebar-link" href="#">¿Qué es la salvación?</a>
</li>
<li>
<a class="sidebar-link" href="#">¿Se pierde la salvación?</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
<hr><br>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %} {% endblock content %}
</div>
<div class="col-md-4 float-right" id="LocalSide">
<form class="search-form" action="/search/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
<div class="form-group">
<input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term" required="">
<input type="hidden" value="3" name="course_id">
</div>
</form>
<h2 class="local-side-heading">In this Section:</h2>
<nav class="local-nav">
<ol data-local-nav-list=""></ol>
</nav>
<a class="pcta" href="/payments/tdd-flask/" data-a-buy-course-cta="tdd-flask">
<span class="label label-success">
<span class="pcta-label">Get the</span>
<span class="pcta-hook">full course</span>
<span class="sr-only">for</span>
<span class="pcta-badge" aria-hidden="true">Now Only</span>
</span>
<span class="pcta-price">$30</span>
</a>
↑ Back to top
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Footer...</span>
</div>
</footer>
</div>
</div>
In your code ".dropdown-toggle::after" right value is the problem, change into this code it will work.
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: -7px;
transform: translateY(-50%);
}
Just remove the below manual css u have designed. bcz it is overriding bootstrap's default css which is not appropiate
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
So I have this code:
.hoverlist12:hover #details {
display: block;
}
The thing is the list doesn't appear at all. If I change the hoverlist12 class with the ul, it works fine, but it appears when I hover on all the elements, and I want it to appear when I hover it only on the first "li". Usually, I have no problem doing this but now I just can't figure it out.
.navbar {
border-radius: 0;
max-height: 50px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
transform: scale(1.1);
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
color: #ffffff;
}
.navbar-default .navbar-nav > li:focus,
.navbar-default .navbar-nav > li:hover {
background-color: rgba(0, 0, 0, 0.15);
}
nav {
font-family: "ITCErasStd-Medium";
}
.hiddeOnTop {
visibility: hidden;
}
.container-fluid {
padding-right: 3%;
padding-left: 3%;
display: inline-block;
width: 100%;
}
.navbar-default,
.container-fluid {
background-color: #be3c7a;
}
.nav > li > a {
font-size: 1.1em;
}
.navbar .facebook {
padding: 0;
margin-top: 7px;
}
.navbar .facebook:hover {
background: none;
transform: scale(1.1);
}
.navbar-brand,
.nav > li.active > a {
font-family: "ITCErasStd-Bold";
}
#details {
padding: 26px 30px;
display: none;
color: white;
z-index: 900;
font-size: 2rem;
list-style-type: none;
position: absolute;
margin-top: 50px;
background-color: #be3c7a;
}
.hoverlist12:hover #details {
display: block;
}
<nav class="mobile_nav">
<button type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav-content">
<li>
<a href="htps://www.facebook.com" alt="facebook" class="facebook"
><img
src="./img/fb-icon.svg"
alt="fb-icon"
onerror="this.src='./img/fb-icon.png'"
/></a>
</li>
<!-- <li class="homelk">HOME</li> -->
<li class="homelk">
CE ESTE adadsadassssss
</li>
<li>INTREBARI FRECVENTE</li>
<li>PARTENERI</li>
<li>CONTACT</li>
<!-- <li><i class="fa fa-facebook-official"></i></li> -->
</ul>
</nav>
<!-- //////////////////////////// NAVBAR \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<nav class="navbar navbar-default">
<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 navigate" href="#home"><span>HOssME</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right dropdown">
<li class="hoverlist12">
CE ESTE USCACIUNEA
</li>
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
<li> DE CE HAYLO GYN </li>
<li> INTREBARI </li>
<li>CONTACT</li>
<li>
<a href="htps://www.facebook.com" alt="facebook" class="facebook"
><img
src="./img/fb-icon.svg"
alt="fb-icon"
s
onerror="this.src='./img/fb-icon.png'"
/></a>
</li>
<!-- <li><i class="fa fa-facebook-official"></i></li> -->
</ul>
</div>
</div>
</nav>
Use selector like this: .hoverlist12:hover ~ #details Because #details and .hoverlist12 elements are siblings or at same level. You can use this selector only .hoverlist12:hover #details when #details is a child element of .hoverlist12. So, please change your CSS code as I suggested OR Please change your structure like:
<li class="hoverlist12">
CE ESTE USCACIUNEA
<ul id="details">
<li>Manifestari</li>
<li>Femeia activa</li>
<li>Maternitatea</li>
<li>Menopauza</li>
<li>Sub tratament</li>
</ul>
</li>
I have created a website using Bootstrap 3. When in responsive mode, my index.html page has a horizontal scroll bar. I could not find what is causing this overflow-x. This only happens in my index.html page.
In the other pages, this overflow is not present. At first I thought it was something in the Contact section of my index.html which has a box shadow which caused the overflow in x. Even after removing it, the overflow was present which made me conclude that the navbar is the one causing the issue.
I am not able to find what is causing this issue.
Screenshot: (the overflow on the right side)
HTML code for navbar:
<header id="main">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">
<!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> -->
SRS Constructions
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu" style="left:0;right: auto">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
</li>
<li><a class="main" href="#services">Services</a></li>
<li><a class="main" href="#projects">Our Projects</a></li>
<li><a class="main" href="#whyus">Why Us</a></li>
<li><a class="main" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
I have not added any specific css which alters the width of the navbar.
CSS for navbar:
/*Navbar styles*/
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand > img {
width: 40%;
position: relative;
display: inline-block;
height: auto;
margin-left: 90px;
margin-top: -80px;
}
#footer {
color: #2e2e2e;
}
}
#media (min-width: 767px) {
#footer {
color: #ffffff;
}
}
.navbar-brand > img {
width: 30%;
position: relative;
display: inline-block;
height: auto;
margin-left: 50px;
margin-top: -15px;
}
The site is also available here
Please help me with fixing this issue.
Make sure you follow the "rules" for the grid...
Columns .col-* must be wrapped in .row, and only .col-* should be the immediate child of a .row
.row > .gallery in the projects section is causing the scrollbar since .gallery is not a column.
I am trying to create a navbar using bootstrap.But the home icon in navbar is not showing properly.It is not in middle and not in parallel with other list.Please help me to solve this.
Problem:
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="row">
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand text-center">
<span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li class="active">
<a href="#">Avro keyboard<br/>
<small>For windows</small>
</a>
</li>
<li>
<a href="#">iAvro<br/>
<small>For Mac OS X</small>
</a>
</li>
<li>
<a href="#">ibus-avro<br/>
<small>for linux</small>
</a>
</li>
<li>
<a href="#">Bangla Fonts<br/>
<small>Unicode/ANSI fonts</small>
</a>
</li>
<li>
<a href="#">Others<br/>
<small>Misc goodies</small>
</a>
</li>
<li>
<a href="#">Blog<br/>
<small>Stay updated!</small>
</a>
</li>
<li>
<a href="#">Help and support<br/>
<small>Forum & Help files</small>
</a>
</li>
<li>
<a href="#">Developers<br/>
<small>repositories and resources</small>
</a>
</li>
</ul>
</nav>
</div>
</div>
</nav>
CSS:
li {
border-left: 1px solid;
border-top: 0px;
border-right: 1px solid;
border-bottom: 0px;
border-style: solid;
border-color: #545454;
}
a {
color: #FFFFFF !important;
}
small {
color: #C5C6C1;
font-style: italic;
}
You can apply any changes to the CSS rule below:
.navbar-inverse .navbar-brand .glyphicon{
padding: 5px 0 0 15px;
}
.navbar {
border-radius: 0;
}
.navbar-inverse .navbar-header .navbar-brand {
color: #FFFFFF;
}
.navbar-inverse .navbar-nav > li:first-child {
border: none;
padding-top: 10px;
}
.navbar-inverse .navbar-nav {
border-left: 1px solid #545454;
}
.navbar-inverse .navbar-nav > li {
border: none;
border-left: 1px solid #545454;
border-right: 1px solid #545454;
}
.navbar-inverse ul.navbar-nav > li > a {
color: #FFFFFF;
}
small {
color: #C5C6C1;
font-style: italic;
}
#media (min-width: 1200px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-inverse .navbar-header a {
display: none;
}
}
#media (max-width: 1200px) {
.navbar-inverse .navbar-nav > li:first-child {
display: none;
}
.navbar-inverse .navbar-nav {
border: none;
}
.navbar-inverse .navbar-brand {
line-height: 0;
}
.navbar-inverse .navbar-nav > li {
border: none;
}
.navbar-inverse .navbar-header {
float: none;
}
.navbar-inverse .navbar-left,
.navbar-right {
float: none !important;
}
.navbar-inverse .navbar-toggle {
display: block;
}
.navbar-inverse .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-inverse .navbar-collapse.collapse {
display: none !important;
}
.navbar-inverse .navbar-nav {
float: none !important;
margin-top: 7.5px;
}
.navbar-inverse .navbar-nav > li {
float: none;
}
.navbar-inverse .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-inverse .collapse.in {
display: block !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> <a href="#"><span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li class="active"> <a href="#">Avro keyboard<br/>
<small>For windows</small>
</a>
</li>
<li> <a href="#">iAvro<br/>
<small>For Mac OS X</small>
</a>
</li>
<li> <a href="#">ibus-avro<br/>
<small>for linux</small>
</a>
</li>
<li> <a href="#">Bangla Fonts<br/>
<small>Unicode/ANSI fonts</small>
</a>
</li>
<li> <a href="#">Others<br/>
<small>Misc goodies</small>
</a>
</li>
<li> <a href="#">Blog<br/>
<small>Stay updated!</small>
</a>
</li>
<li> <a href="#">Help and support<br/>
<small>Forum & Help files</small>
</a>
</li>
<li> <a href="#">Developers<br/>
<small>repositories and resources</small>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>