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>
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.
My element has to be clicked on for CSS to work.
I tried using bootstrap for a nav bar. With 1 logout link on the top right.
I used navbar-nav ml-auto for it.
After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;
When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.
Here is what I've tried:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
CSS:
* {
/*display: none;*/
box-sizing: border-box;
}
#logout-btn.nav-item {
margin-right: 50% !important;
}
Can you help me explain why, or is it my browser's fault?
I find it quite weird, already cleared cached.
Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-4">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
I'm currently working on an one-pager with a nav by bootstrap. Since I don't know a way to scroll to certain div's ids with routerLink, I'm using href=#id, which works fine so far. I'm currently trying that onWindowScroll the class active shall swap it owner according to the current div which is displayed.
So when the user for instance scrolls to about, the active class shall be assigned to the associated nav-link, which in this case obviously is about us.
#HostListener('document:scroll', [])
onWindowScroll() {
}
<div class="container-fluid">
<a class="nav-link logo float-left" href="#">peak design</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
I can't get the "about me" "contact" and "portfolio" all on to stay on the same line as the my name section, even though they are on the same div. And I can't use positioning because this bootstrap.
How can I solve this?
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid border" style="overflow:visible">
Vamsi Krishna Pappusetti
<ul class="nav row justify-content-end" id="navbar">
<li class="nav-item">
<a class="nav-link " href="#">About Me</a>
</li>
<li class="nav">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
Here's one idea:
I made the container <div> into a nav row, with p-0 and m-0 to clear padding and margins.
I made the "name" link into a nav-link so it's padding is the same as other links.
I set ml-auto on the <ul> to align it to the right side.
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav row border container-fluid p-0 m-0">
Vamsi Krishna Pappusetti
<ul class="nav ml-auto">
<li>
<a class="nav-link" href="#">About Me</a>
</li>
<li>
<a class="nav-link" href="#">Contact</a>
</li>
<li>
<a class="nav-link" href="#">Portfolio</a>
</li>
</ul>
</div>
You have to combine "nameBlock" and "navbar" into a row div and use ml-auto (Margin utilities) in Bootstrap 4 to align navbar to end.
Code: https://codepen.io/1412108/pen/BVLRRP
Bootstrap 4 Margin Utilities
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>