I'm wanting to remove a strange white line that appears at the bottom of a navbar in the header of my page. The header has a dark background, but when I click on the toggler button a strange white line appears at the bottom of the header.
You can see my webpage here:
abdelp.github.io
In the image below is indicated the line that I don't know where is coming from and I want to remove:
the HTML index is just the bootstrap initial template and the navbar template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Hello, world!</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Abdel Pérez</a>
<button class="navbar-toggler navbar-dark" 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-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="site-banner site-banner--dark">
<div class="site-banner__inner anim anim-up anim-fade loaded">
<div class="site-banner__content">
<h1 class="site-banner__title">
My Projects
</h1>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
And this is the css
/* Header */
.header {
background-color: #191a1d;
}
.site-banner--dark {
padding-bottom: 50px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
border-bottom: none;
background-color: #191a1d;
}
.site-banner--dark .site-banner__title {
color: #fff;
}
.site-banner--dark .site-banner__tagline,
.site-banner--dark .site-banner__subtitle {
color: #ababab;
}
I'm telling you my personal opinion and the solution I got:
This is most likely related to the browser's rendering engine. So we can call it a kind of bug, albeit partially.
I have encountered such situations in many browsers while playing with the scale of SVGs.
For the solution of this situation, superimposing the two elements is an excellent result.
So instead of intersecting two elements, they must be nested 1px.
I marked the required encodings for this as /* Added */ in the CSS section of the snippet.
If you want, you can test the fluency of the animation by running the snippet.
Good luck with.
/* Header */
.header {
background-color: #191a1d;
}
.site-banner--dark {
/* Added */ margin-top: -1px;
/* Added */ padding-top: 1px;
padding-bottom: 50px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
}
.site-banner--dark {
border-bottom: none;
background-color: #191a1d;
}
.site-banner--dark .site-banner__title {
color: #fff;
}
.site-banner--dark .site-banner__tagline,
.site-banner--dark .site-banner__subtitle {
color: #ababab;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header class="header">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Abdel Pérez</a>
<button class="navbar-toggler navbar-dark" 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-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="site-banner site-banner--dark">
<div class="site-banner__inner anim anim-up anim-fade loaded">
<div class="site-banner__content">
<h1 class="site-banner__title">
My Projects
</h1>
<h2 class="site-banner__subtitle">
<!-- For over 10 years I’ve been designing and developing websites. Below are some of my favourites. -->
</h2>
</div>
</div>
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
Related
Can I customize following breakpoint using bootstrap ?
Code :-
<nav class="navbar navbar-expand-lg" style="background-color:#1B202C;">
<a class="navbar-brand" href="#"><img style="margin-left: 15px; margin-top: -20px;" class="logo" src="assets/logo.png" alt="logo"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsedNavBar"><span class="navbar-toggler-icon"></span></button>
<div class="fixed-nav">
<ul class="navbar-nav ">
<li id="nav-1" class="nav-item ">
<a class="nav-link" href="#">AAAAA</a>
</li>
<li id="nav-2" class="nav-item">
<a class="nav-link" href="#">BBBBB</a>
</li>
<li id="nav-3" class="nav-item">
<a class="nav-link" href="#">CCCCC</a>
</li>
</ul>
</div>
</nav>
But when I override this by adding,
#media screen and (min-width:633px) and (max-width:1072px) {
.collapse {
display: none !important;
}
}
to its style.css. Then navbar collapses at my custom breakpoint (1072px). But still hamburger icon appears when it reaches to -lg (≥992px) . So I need to know is, is there any method to collapse at custom width also appearing the hamburger icon.
Thanks !
If you give lg , sm, xs or xl after navbar-expand class navbar expands automatically by it's custom value. For example if you write navbar-expand-lg value to the nav class it collapses at 992px width or if you give navbar-expand-md it collapses at 768px. You can inspect codes below . I hope it works for you.
button.navbar-toggler {
background-color: white;
}
span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(41,41,41, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<title>Bootstrap</title>
</head>
<body>
<nav style="background-color: black;" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Logo Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">AAA</a>
<a class="nav-link" href="#">BBB</a>
<a class="nav-link" href="#">CCC</a>
</div>
</div>
</nav>
</body>
</html>
I have a web app that I'm working with where the Nav bar's height doubles in size on a mobile view. Here's what it typically looks like:
And here's what it looks like an a mobile view:
What can I do to prevent this resizing? Is there a way to make the header and logo responsive based on screen size? Here's the code I've got:
.navbar {
background-color: #951010;
padding-top: 1em;
padding-bottom: 1em;
}
.navbar-brand {
color: #FFF;
font-size: 2em;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
<a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></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="#">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seasons</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
What am I missing here?
use media queries to control the bootstrap Responsive breakpoints
.navbar {
background-color: #951010;
padding-top: 1em;
padding-bottom: 1em;
}
.navbar-brand {
color: #FFF;
font-size: 2em;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
#media (min-width: 100px) and (max-width: 400px) {
.navbar-brand {
font-size: 1em;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
<a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></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="#">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seasons</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You need to add a media query that reduces the font-size of the 'cyclone analytics' on smaller devices. The reason the nav bar is getting bigger is because the hamburger is being wrapped onto a new line.
So if you add a media query along the lines of:
#media only screen and (max width: 700px) {
.navbar-brand: font-size: 1rem;
}
It'll work because the main logo is smaller, so the hamburger isn't being wrapped. Hope that helps. :-)
My bootstrap and css is functioning fine on desktop browser, but when I go to the site via mobile there are two issues: the navbar isn't as wide as the hamburger toggle and image (regardless of image resize), and the hamburger drop down does not push page contents down--it overlays on contents--this could be fine, but I'd at least need to correct for width of navbar.
Any help is much appreciated
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="<css file>" >
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top" >
<a class="navbar-brand" href="/"> <img src="{% static "br_email/logo.png" %}" id = "logo"></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">
<li class="nav-item">
<a class="nav-link" href="/"><b>Home</b><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/events/"><b>Events</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact/"><b>Contact</b></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="/profile/"> <b>Profile</b></a>
<a class="nav-item nav-link" href="/logout/"> <b>Logout</b></a>
</span>
</ul>
</div>
</nav>
<main role="main" >
{% block content %}{% endblock %}
</main>
<div class="content"></div>
<footer class="footer">
<div class="row d-flex align-items-center">
<!--<!– Grid column –>-->
<div class="col-12 pt-4">
<!--<!–Copyright–>-->
<p class="text-center">
© 2020
•
<a href="/contact/" >
<strong> Contact </strong>
</a>
</p>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]>
</script>
<script>
$(document).ready(function(){
if ($(document).height() > $(window).height()) {
$('#footer').css('position', 'relative');
}
});
</script>
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active'); $(this).parents('li').addClass('active');
}
});
});
</script>
</body>
</html>
Navbar related CSS
.navbar-fixed-top {height: 40x;}
.navbar-brand img {height: 40px;}
.navbar-dark{
background-color: #1a2125;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
Your navbar might resize if it doesn't have a defined width property. I looked through all of your code, and it doesn't look like your navbar has a set width in your css, or in your javascript/jquery/etc. The <nav> tag is also a block-level element, meaning that it will take up the entire space of a new row. If you wanted to change the width more easily, you could change it to an inline-block element in css, or use the margin and padding settings. One other mistake I caught is that in your css, at the top of the snippet, you typed 40x instead of 40px (Not sure if you caught that). If you read through your code carefully you may or may not find other mistakes.
I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.
I have a Bootstrap 4 navbar and I want another section to appear below it when you hover over a specific link. And I've written everything, the thing is, it doesn't work for some reason. I've tried using a:hover div {} and a:hover + div {} to make sure it's not the structure of CSS.
Can someone take a look and let me know what is going on? Please open the snippet in full screen.
.hover {
background: red;
display: none;
}
#projects:hover + .hover {
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="/">
<img src="..." alt="Logo">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item" id="projects">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="hover">
hover
</div>
Consider the section below
#projects:hover + .hover {
display: block;
}
Whenever you hover over #projects it will change the display to block on any sibling elements that immediately follows #projects but there is no elements with .hover that follows #projects. So this will never work. the .hover container is placed outside the nav bar and I believe you would like to show that .hover container when you hover of the link.
To note, with css, you can write rules to style elements from parent to child or surrounding siblings but you cannot go up the chain to the parent and afterwards to the parent sibling.
One option is to place the section inside the navbar but this will look somehwhat ugly to show a whole section in the nav ( I am assuming you do not want sub menu items).
You can achieve this, with some javascript (jquery for a shorter solution).
The solution below demonstrates a hover on a menu link that triggers the display of a section .hover which is outside the nav bar
function show() {
$(".hover").css({
display: "block"
})
}
function hide() {
$(".hover").css({
display: "none"
})
}
$("#projects").hover(show, hide)
.hover {
background: red;
display: none;
}
#navt {
border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" id="navt">
<span class="navbar-toggler-icon"></span>click here
</button>
<a class="navbar-brand" href="/">
<img src="..." alt="Logo">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item" id="projects">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="hover">
hover
</div>
The method what you have been trying only works for sibling elements.
Example: Two <div> elements (Try this)
<style type="text/css">
.faa {
height:200px;
width:200px;
background: blue;
}
.boo {
height:200px;
width:200px;
background: yellow;
}
.boo:hover ~ .faa{
display: none;
}
</style>
<div class="boo"></div>
<div class="faa"></div>
This can not be done with CSS, So Try below JQuery code block to solve your problem,
$(function() {
$("#projects").hover(function(){
$('.hover').show(400);
}, function(){
$('.hover').hide(400);
});
});
You can know more,
On a CSS hover event, can I change another div's styling?