Im using Bootstrap 4. My goal is to make navigation with toggler on left, text on center and text on right. The problem is that after I click toggler to reveal navigation, it's pushing down my navigation elements. What I noticed is that without changes in order property it's working good and not pushing down elements but Im trying to do this with order property as it looks simple and clean.
body
{
margin: 0;
padding: 0;
}
/* Navigation Start */
.navbar-bg-custom
{
background-color: red;
}
.navbar
{
justify-content: space-between;
}
.navbar-brand
{
order: 2;
}
.navbar-nav{
}
.icon
{
order: 3;
}
.navbar-brand img
{
height: 80px;
}
/* Navigation End */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-light navbar-bg-custom">
<a class="navbar-brand" href="#">This is getting pushed down on </a>
<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 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>
</ul>
</div>
<div class="icon">
This too
</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>
I tested your code on my machine and got to know that when I remove the external style at least, the navabar brand is on it's position.
I can assure you that if you avoid giving dimensional attributes like margin, padding or positional attributes to your html elements using your css code while using bootstrap, you won't face this issue.
I'll suggest you to use styles and dimensional attributes of bootstrap library in most of the cases.
The dimensions specified by you cause a deviation in the bootstrap's properties
Just let me know if this answer was helpful.
Related
I have a problem with a navbar from Bootstrap. I don't understand why but when I put this webpage on mobile view the Bootstrap Navbar collapse doesn't show when i click on the button on the right ...
Here is my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="nav.css">
<link rel="icon" href="favicon.ico">
<title>SmartHorse | Accueil</title>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://kit.fontawesome.com/f7131c55f8.js" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="Logo_V2.jpeg" alt="cheval" class="nav-logo image-logo">
<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="index.html">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blockchain.html">La technologie blockchain</a>
</li>
<li class="nav-item" style="background-color: white; height: 23px; width: 23px; margin-top: 8px; margin-left: 8px">
<img src="https://www.makrea.com/img_pngs/RS03.png" alt="logo linkedin" style="width: 25px; padding-bottom: 5px">
</li>
</ul>
</div>
</nav>
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Thanks a lot in advance for your help !
I copied the code to my editor and opened the file, I don't see any issue here, works as expected. What Browser are you viewing the file on? Or perhaps you don't have a body tag? You only seem to have the closing body tag.
Tablet - https://imgur.com/gX0SFxv.jpg
Mobile - https://imgur.com/rl12X8r.jpg
Thanks guys !
The problem came from my CSS I put the property (position: absolute left 74%) to my ul hence the problem on mobile view.
How do I change the colour of the text in this navbar in Bootstrap?
I'd like to only make the nav-links purple and not the main title on the left.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animal Shelter Website</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="index.js"></script>
</head>
<body style="background-color: black">
<nav class="navbar navbar-expand-xl navbar-dark">
<a class="navbar-brand" href="#">Animal Shelter Website</a>
<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>
<body id=main-navbar">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item nav-item-border">
<a class="nav-link active" href="index.html">HOME</a>
</li>
</div>
</nav>
<hr>```
You can add a new css style sheet that overrides the class nav-link with a different color.
You may have to use !important.
.nav-link {
color: #123455 !important;
}
if you'll use nav-link somewhere else and dont want to edit that class directly, you can create a custom class and apply that.
You can use simple CSS!
Add
<style>
a:link {
color: ANYCOLOR;
}
a:visited {
color: ANYCOLOR;
}
</style>
To learn more, go to this link
The simple way is to add the style in a style tag:
<style>
.nav-link {
color: purple;
}
</style>
Instead, if you have custom css file you can add to it:
.nav-link {
color: purple;
}
Please make sure that this style rule comes after other style tags and css files in your html document, otherwise it might be overwritten by another style rule.
Also, try to avoid using !important as much as possible. As it can cause complications in your css as you add other style rules.
Please also note that you have two opening <body> tags while html files should have only one opening <body> tag and one closing </body> tag.
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. :-)
I'm new to HTML and CSS and I encounter a problem that I just can't figure out. It has happened before in other attempts but in this case I was trying out bootstrap. So I don't think that there's the problem (in every case, my style.css file crushes the css files used for bootstrap).
So here are the facts. I want to create a logo that, when hovered, changes appearance. My css file is linked because the background colors does appear. The hover option works fine too. I must have forgotten something or lack some knowledge.
This question is frequently asked but I haven't found any answer able to help me.
, in case you want to check it out yourself and my files
.mclogo {
width: 45px;
height: 45px;
background-image: url('./pic/LogoMc1.png');
background-color: red;
}
.mclogo:hover {
background-color: blue;
background-image: url('./pic/LogoMc2.png');
}
<!doctype html>
<html lang="en">
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./public/style.css">
<title>Server :: le rôle-play sur minecraft</title>
</head>
<body>
<!--- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="https://minecraft.net/en-us/"><div class="mclogo"></div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Accueil</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Où suis-je ?</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Le serveur</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Nous rejoindre</a></li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Thanks in advance.
try removing the "." out of your file path on your css. In order for relative paths to work on CSS and HTML, you need to make sure it follows standard file notation
Can you view your image in the browser at the address you are specifying? In other words, does typing www.yourwebsite.com/pic/LogoMc1.png into your browser's address bar bring up the image?
If not the path is wrong.
If your browser does find the image at that address, try using the absolute path in your CSS declaration. If that doesn't work, you must be overriding these declarations somewhere later in your CSS file.
I've been searching the boards here and nothing seems to cover what could be wrong. My navbar is all well and good but no hamburger or menu shows up when I go mobile. I've tried changing combinations and implementing different collapse names, but to no avail. Any ideas? Here's my code:
<header class="navbar navbar-custom" role="banner">
<div class="container">
<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>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pages">
<li class="page">item1</li>
<li class="page">item2</li>
<li class="page">item3</li>
<li class="page hidden-xs"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></li>
<li class="page">item4</li>
<li class="page">item5</li>
<li class="page">item6</li>
</ul>
</div>
</div>
</header>
Check if you have the meta tag in your head section
<meta name="viewport" content="width=device-width, initial-scale=1">
Also your Nav tag is not closing after the ul element. Check your tag closures
I think the </div> after the </ul> has to be replaced
In the original code, there's a div that closes the nav. That happened when I formatted for this site. In the original, it is closed by a nav tag. I forgot to include the header sets. Here they are:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">
<script src="https://use.fontawesome.com/8633c13aa3.js"></script>
</head>
you should check the horizontal scroll when u minimize the screen.that is one of the reason when your content in not fully responsive and when u minimize the screen the scroll appears horizontally and the hamburger icon not appear...
first of all remove all content expect the navigation on your page and then minimize the screen .and if problem still appers then you sould also check that your background color and color are change or not..