I am creating a website with the react.js framework and am very new to it. I am trying to get my logo on the bootstrap navbar. However, it seems that the image is not displaying.
This is the code for my navigation bar
<nav className="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Facilities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Executives</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
You need to import image. You can't add src like this in react:
Do this:
Import logo
import myLogo from 'navbar-logo.svg';
Add logo src:
<img src={myLogo} alt="" />
...your rest of code
If you want to show logo you must use html tag :
<!DOCTYPE html>
<html>
<head>
<link media rel="icon" href="##your logo url" type="image/png" />
</head>
<body>
##content
</body>
</html>
Try like this
.logo {
height:25px;
}
<nav className="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE" alt="" class="logo"/></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Facilities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Executives</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
if you want to use a local image, import from your project and pass to src
import Logo from './path_name';
pass like this.
<img src={Logo} alt="" class="logo"/>
Related
when I display the menu it goes to the right and scrolls the user profile. I need the menu to always be in the center and the profile always to the right.
I am using angular 12 and bootstrap 5.
Below I leave the code that I am using and some images of how it should look
Thanks!
link
stackblitz
<nav
class="navbar navbar-expand-lg navbar-dark bg-primary"
>
<div class="container-fluid">
<a class="navbar-brand"
><img src="../../../assets/Targaryen.ico"
/></a>
<button
class="navbar-toggler justify-content-center"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerbur"
aria-controls="navbarTogglerbur"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur">
<ul class="navbar-nav justify-content-center mt-lg-0">
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
</div>
<div class="dropdown">
<img
src="{{ info.photoURL }}"
/>
<ul
class="dropdown-menu dropdown-menu-end dropdown-menu-dark"
aria-labelledby="dropdownMenuButton1"
>
<li class="dropdown-item" >
</li>
<li class="dropdown-item" >
</li>
</ul>
</div>
</div>
</nav>
Simply switch the order of the navbar-nav and dropdown. Then use order-lg-last on the dropdown to keep it right on lg...
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand"><img src="//via.placeholder.com/30" /></a>
<button class="navbar-toggler justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerbur" aria-controls="navbarTogglerbur" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="dropdown order-lg-last">
<img src="//via.placeholder.com/30" />
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1">
<li class="dropdown-item">
<a href>Item</a>
</li>
<li class="dropdown-item">
<a href>Item</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur">
<ul class="navbar-nav justify-content-center mt-lg-0">
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
<li class="nav-item">
<a href class="nav-link">Item</a>
</li>
</ul>
</div>
</div>
</nav>
Codeply
I recently added a bootstrap navbar in a react app but it is not displaying properly when I switch sections eg. from the main page to the services page. I want a dark navbar to be displayed when switching pages instead
This is my HTML code for the navbar
<nav className="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu <i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Try creating a stylesheet and link it in your header.
Here is the code to include in the head. This would link in a stylesheet named "styles.css":
<link rel="stylesheet" href="styles.css"/>
Within this stylesheet try this:
#darkNavbar{
color : black
}
This will make attributes with id = "darkNavbar" be the color black.
I've updated your code to remove the class navbar-dark and gave the navbar the darkNavbar id.
<nav id="darkNavbar" className="navbar navbar-expand-lg fixed-top" id="mainNav">
<div className="container">
<a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="assests/img/navbar-logo.svg" alt="" /></a>
<button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu <i className="fas fa-bars ml-1"></i>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav text-uppercase ml-auto">
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Faciltities</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Owners</a></li>
<li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Give this a shot. Let me know if it's any help.
just trigger the navbar color to black in a style tag...
<style>
.navbar-dark{
color: black;
}
</style>
I am trying to add a header as part of my navigation but below it like this:
I have tried adding another row using bootstrap however it just comes out like this:
this is my code:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
</ul>
</div>
<div class="row">
<header id="header">
<div class="container">
<div class="row">
<h2> Tenants </h2>
</div>
</div>
</header>
</div>
any suggestions?
Read more about Bootstrap's Navbar and grid.
The navbar should only contain supported content.
The header shouldn't be in the navbar, put it below.
.container shouldn't be nested in other .containers.
.row is meant to contain only col-*.
Demo on Codeply
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid bg-light">
<header id="header" class="d-flex align-items-center">
<h2 class="mx-auto">Tenants</h2>
</header>
</div>
I have a problem with my bootstrap 4 navbar.
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<container class="container">
<a class="navbar-brand js-scroll-trigger" href="#top">MOEINICH</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-2x"></i>
</button>
<container class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">contact</a>
</li>
</ul>
</container>
</container>
</nav>
and the css:
https://pastebin.com/2D5HVmVy (for some reason, I couldnt paste it into the code tags)
I've got a navbar in Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>
and I want to make that the language switch links will be before "MENU" burger, is this possible?:
LINK
Any ideas how I can do that? I haven't been able to find a solution.
Make ul absolute and place it with top and right coordinates.
Set both ul and li's to inline-block.
Example below:
ul.nav.navbar-nav.lang-right {
position: absolute;
right: 160px;
top: 7px;
display: inline-block;
}
li.nav-link {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<header class="row">
<div class="w-100">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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="p-2" id="menuLabel">MENU</span><span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="../img/svg/stopa-logo.svg" width="120">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu-margined-right">
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">We Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav lang-right">
<li class="nav-link">
<a class="nav-item" href="#">CZ</a>
</li>
<li class="nav-link">
<a class="nav-item" href="#">EN</a>
</li>
</ul>
</nav>
</div>
</header>