When I run this code my image, which is a small picture of myself and my wife is being padded on the right and left side with a thin white line. I can't quite figure out what I'm missing.
Not sure if I'm using the navbar correctly as I'm still trying to figure this stuff out.
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark fixed-top">
<!-- Brand/logo -->
<div class="container col-sm-12">
<a class="navbar-brand" href="#">
<img src="http://dishtruck.com/joe_tn.jpg" alt="logo" <style width ="40px" height = "40px">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Social Media</a>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</ul>
</div>
Related
I am trying to make a navbar with Bootstrap 4, but my code doesn't seem to work. My code practically mirrors the tutorials, with only a few changes to nav-brand. What did I do wrong? Here is what it looks like.
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="/">
<img src="/assets/logo/logo.svg" width="30" height="30" class="d-inline-block align-top"
alt="">
<b class="hojasdeplata">Fourteen Trees</b>
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
It turns out that I needed to move nav-brand into a div with the rest of the navigation.
I'm new to html and bootstrap-4 in general so please be lenient. I'm doing a website for one school project and I have a problem with the navbar I created. It works completely fine until you view the page in a smaller view than 575 px. The buttons suddenly misalign and they are stacked on top of each other vertically rather than horizontally. I want them to stay in the same horizontal position. It's just a school project, so it doesn't have to be perfect, but I really want to make this one thing to work.
I would be grateful for your help!
<body>
<nav class="navbar sticky-top navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link disabled" href="#">MENU</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="HOMEPAGE.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="PAGE.html">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Missions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</nav>
I am making a website with Bootstrap and the navbar to stick to the top however using the class sticky-top doesn't seem to do anything.
Here is the code for the nav:
<div class="row">
<div class="col-md-12">
<ul class="nav justify-content-center sticky-top">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
</div>
Hope someone can help!
You need to put sticky-top to the container of your navbar, if that row is the navbar, then you need to put it there instead of its child.
/* For displaying */
body {
height: 300vh;
background-image: linear-gradient(to bottom, white, black);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- You need to move sticky-top to the outer element of navbar, which is here -->
<div class="row sticky-top">
<div class="col-md-12">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
</div>
I'm just starting to get to grips with bootstrap.
I'm trying to create a vertical-navbar on the left of the page after the user has scrolled past the full-page 'intro' using bootstrap 4. The code below produces the navbar on the left side of the page, however there is a problem with it
The navbar stays in a collapsed state, even after resizing the window small and large again
Why does the code cause the navbar to start closed?
Thanks, Jeff
<header id="home" class="jumbotron h-100vw w-100vw">
...
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="#home">
<img src="img/logo.png" class="img-fluid" alt="Home">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse-md flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="col-md-10">
REST OF MY CONTENT ON THE RIGHT
</main>
</div>
There is no navbar-collapse-md class. Change it to just navbar-collapse.
<div class="collapse navbar-collapse flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>
Most of the examples I found just hide everything except for the brand-logo and just show one toggle icon. But I want multiple icons on small screens but at the moment they wrap on xs size even if they have enough space.
I also replace the bigger icons by smaller icons now, but as it's not the missing space I guess, this does not help either.
The brand-logo and the two icons simply should be in the same line. Can someone please push me in the right direction. You have to run the code-snippet in an own window to make it small enough (problem is just on xs size).
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-48 { font-size: 48px; }
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
You can use flex-row in the navbar and navbar-nav to prevent it from stacking vertically on xs screens..
https://www.codeply.com/go/beHGmETlkM
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center flex-row">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<div class="navbar-collapse collapse">
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
</div>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto flex-row justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>
https://www.codeply.com/go/beHGmETlkM