I was trying bootstrap logo in navbar and the logo is not showing I have tried many things.
I am trying <nav> tag I am pasting my code also I am also not using any CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img class="lg" src="F:\html\musicbrand\logo1.jpg" alt="logo" style="width:40px;" />
</a>
</nav>
The issue maybe because of the image path
<img class="lg" src="F:\html\musicbrand\logo1.jpg" alt="logo" style="width:40px;" />
Make a folder name img within the folder where you have your html file
and change the src path to
<img class="lg" src="img/logo1.jpg" alt="logo" style="width:40px;" />
Thanks everyone who have answered.
I have been able to figure out the problem as giving full path was the problem.
Again thanks everyone.
Try this, but if you put your image under a folder at the same hierarchy then it will be good practise!
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="lg" width="130px" height="70px"src="{% static "F:\html\musicbrand\logo1.jpg"%}" style="position:relative;top:-10px">
</a>
</div>
</nav>
Related
This question already has answers here:
Missing visible-** and hidden-** in Bootstrap
(13 answers)
Closed 2 months ago.
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="float-start .d-none .d-lg-block .d-xl-none">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Example 1</h1>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
i wanted the website can be visible only lg or md devices otherwise the logo will be hidden.
You need to add both, Bootstrap CSS and Bootstrap JS.
To hide logo on mobile, add Bootstrap classes d-sm-block d-none.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="d-sm-block d-none">
<div id="logo-img" alt="Logo image">Logo</div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Example 1</h1>
</a>
<p>
<img src="R.png" alt="Korsher certification">
<span>Kosher Certifield</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
I added my logo to my navbar, but then something strange happened. Every item in my navbar that contains more than one word, seperated with a space, gets pushed back. See image below:
Current navbar issue
Since I'm not that experienced I tried to search for common fixes for this as I could not see any problems with my code.
I tried display: infline-flex; !important
but without success.
navbar-brand position: absolute; left: 50%;
seems to work, but I can't place it to the left side of the navbar this way
this is what my navbar code looks like:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-md bg-light navbar-light py-3 shift" id="mainNav">
<div class="container">
<a href="#" class="navbar-brand">
<img src="img/jd_full.png" width="20%" alt="logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse nav-container" id="navmenu">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item">
over mij
</li>
<li class="nav-item">
opleiding
</li>
<li class="nav-item">
stage
</li>
<li class="nav-item">
realisaties
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
I checked for padding on the navbar-brand class, but no results.
Anyone knows a fix for this?
your problem is caused by the width you set, for logos use a fixed size equivalent to the proportion of your navigation bar.
change this <img src="img/jd_full.png" width="20%" alt="logo">
for this other <img src="img/jd_full.png" width="120px" alt="logo">
I'm new in bootstrap how to put the logout link in the same line with picture and text
thanks
<nav class="navbar navbar-dark bg-dark justify-content-between">
<h4 class="navbar-brand">
Hello {{std_name}} Your rate is: {{std_rate}}
<img src="{% static 'images/star.png' %}" />
</h4>
logout
</nav>
You need to add align-items-center class in nav to center it vertically.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark justify-content-between align-items-center">
<h4 class="navbar-brand">
Hello {{std_name}} Your rate is: {{std_rate}}
<img src="{% static 'images/star.png' %}" />
</h4>
logout
</nav>
I am attempting to make a simple navbar/menu for my website using bootstrap. I have a logo and a title, but I can not get them to align correctly. They either stack or the title is shifted all the way to the right of the navbar (as is in the provided code.) I have included the code I feel is applicable. This is my first experience with anything front end, any help would be appreciated.
HTML
<header>
<nav class="navbar navbar-default">
<div class="container">
<a href="index.html" class="navbar-left">
<img
src="img/logo-placeholder.png"
height="115"
width="115"
alt="company logo"
/>
</a>
<a href="index.html" class="navbar-brand">
<h1>Title</h1>
</a>
</div>
</nav>
</header>
You can give img the classes d-inline-block and align-top. Check out the snippet.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<header>
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo-placeholder.png" height=115 width =115 alt="company logo" class="d-inline-block align-top">
<h1 class="d-inline-flex">Title</h1>
</a>
</div>
</nav>
</header>
I have this code and i want to replace the "text example" with a image of my own.
I tried replacing it with CSS but i made it worst.
Thanks in advance.
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll" href="#page-top">text example</a>
Try this method.
<a class="navbar-brand js-scroll" href="#page-top">
<img src="..." alt="Image_description">
</a>
if you are using the bootstrap CDN you can add more styles if you prefer
and then try using
<a class="navbar-brand js-scroll" href="#page-top">
<img src="..." class="img-fluid" alt="Responsive image">
</a>