Apologies if this has been asked before (I'm new to all of this and very much still learning, hard to find the answer on search).
I'm trying to have a collapsible navbar that when expanded, has the items separated by | (can be border right instead), but when collapsed and in a hamburger button the '|' separators do not appear.
At the moment they appear, code below, links to pictures:
Collapsed view (want to remove the '|':
expanded view (want to keep the '|' or at least, something that looks the same):
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navvy">
<span class ="navbar-toggler-icon"></span>
</button>
<div class ="collapse navbar-collapse navbar" id ="navvy">
<ul class ="navbar-nav">
<li class="nav-item white"><a class="nav-link active navbar-brand " id ="Overview" href ="overviewpage">Overview</a>|
</li>
<li class="nav-item white"><a class="nav-link active navbar-brand " id ="CS50-nav" href ="cs50page" style="border-bottom: solid 1px white">CS50</a>|
</li>
<li class="nav-item"><a class="nav-link active navbar-brand " id = "Portfolio" href ="Portfoliopage">Portfolio</a>
</li>
</ul>
</div>
</nav>
Thanks for any and all help!
You could add a couple of rules with media query. For example in this snippet I added some borders right just in the desktop version.
You could even use bootstrap helper classes to display elements just in mobile or just in desktop view. Take a look at https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
I hope this could help! 😀
#navvy>ul.navbar-nav>li {
display: inline-block;
width: 100%;
}
/* Desktop versions*/
#media (min-width: 1025px) {
#navvy>ul.navbar-nav>li {
width: initial;
list-style-type: none;
}
#navvy>ul.navbar-nav>li>a {
border-right: 1px solid #666;
padding-right: 1em;
margin-right: 1em;
}
#navvy>ul.navbar-nav>li:last-child>a {
border-right: 0;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navvy">Menu</button>
<div class="collapse navbar-collapse navbar" id="navvy">
<ul class="navbar-nav">
<li class="nav-item white"><a class="nav-link active navbar-brand " id="Overview" href="overviewpage">Overview</a>
</li>
<li class="nav-item white"><a class="nav-link active navbar-brand " id="CS50-nav" href="cs50page" style="border-bottom: solid 1px white">CS50</a>
</li>
<li class="nav-item"><a class="nav-link active navbar-brand " id="Portfolio" href="Portfoliopage">Portfolio</a>
</li>
</ul>
</div>
</nav>
Related
I want the navbar lists that are placed on the right side, to be aligned below the header icon that is placed on the left side. One can toggle the navbar lists by creating a button to represent it, but I want it to simply expand under the header icon.
Also, I know that the disappearance is due to the navbar-expand-lg class. How should I approach fixing this? Is it possible by bootstrap? Or can it be fixed with HTML and CSS, as I don't want it to be done with javascript.
HTML
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">MADHUMITHA PRABAKARAN</a>
</div>
<!--
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
-->
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
background: #ffffff;
border-style: solid;
border-color: #cccccc;
border-width: 2px;
border-left-style: hidden;
border-right-style: hidden;
border-top-style: hidden;
top:0;
}
.navbar-brand {
background-color: #4aaaa5;
color: white;
font-size: 200%;
font-family: 'Times New Roman', Times, serif;
text-align: justify;
margin-top:-10px;
margin-bottom: -10px;
}
I guess you want to use your <a>your title</a>as toggle and keep it display in all sizes.
Then you just need to change class="navbar-brand" to class="navbar-brand d-block" to override the "display:none" of .navbar-brand in different sizes.
You might use following code snippet as a idea, which slightly alters from official documentation. Run it in full page and resize the window.
If you want to add any CSS styling. Try to do something like
<div class="navbar-brand newstyle">
then add .newstyle { something here } to your css stylesheet instead of modify the navbar-brand directly unless you pretty sure you are going to override the bootstrap css style for all navbar-brands in your website.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm">
<div class="container-fluid d-block">
<div class="row">
<div class="col-12">
<a class="navbar-brand navbar-toggler d-block" data-toggle="collapse" data-target="#collapsibleNavbar" href="#">Navbar</a>
</div>
</div>
<hr>
<div class="row">
<div class="col-12">
<div class="collapse show navbar-collapse" id="collapsibleNavbar" aria-expanded="true">
<ul class="navbar-nav">
<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" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
i have use minus margin to place the navbar inside a div which has a class main..in small screen when i click on the navbar toggler icon it does not look good..because i need to change the margin again...how can i solve this problem without using minus margin?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="top"></div>
<div class="wrapper">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</nav>
<div class="main"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
here is output of my code:
https://codepen.io/Sakhawat5/pen/NzwQJz
--Update--
As I think your question is how to append the navbar class to the main div if the user has scrolled more then 50px. This is what could help you out.
$(document).scroll(function() {
if ($(document).scrollTop() >= 50) {
// user scrolled 50 pixels or more;
// do stuff for example:
$('.navbar').appendTo('.main');
// this will append the navbar to the main div, if you want other styling on the navbar aswell we can do the following:
$('.navbar').addClass('.UserHasScrolled')
// now in you CSS set styling to .UserHasScrolled
} else {
// do things when user has NOT scrolled more then 50px
}
});
Also make sure to include jQuery, this is possible, paste this beneath all other scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
To your .UserHasScrolled class you can set something like this:
.UserHasScrolled {
position: absolute;
width: 100%;
top: 0;
}
--First answer--
What you ask for is: #media screen and (max-width 767px) while the screen width has a lower size than 767px you can define an overwriting css style like this:
#media screen and (min-width 767px) {
.navbar {
margin-bottom: -336px;
}
}
But this causes another problem, while the navbar is closed the main class will still have a margin of -336px and that's not what you want I guess.
To keep your navbar on top just set position to fixed:
.navbar {
position: fixed;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
This is your solution:
.top{
height:50px;
background:red;
}
.navbar{
margin-left:20px;
margin-right:20px;
}
.main{
height:1500px;
background:orange;
}
<div class="top"></div>
<div class="wrapper">
<div class="main">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navDrop">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
SKILL
</li>
<li class="nav-item">
PORTFOLIO
</li>
<li class="nav-item">
TEAM
</li>
<li class="nav-item">
BLOG
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/4.1.1/js/bootstrap.min.js"></script>
The changes to your CSS as follows should fix the issue:
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: fixed;
}
and if you don't want a fixed nav:
.navbar{
margin-left: 5%;
margin-right: 5%;
width: 90%;
position: absolute;
}
Let me know if you have any questions.
I am trying to make a topbar and a sidebar.
This is the code for my top navbar:
<header>
<nav class="navbar navbar-expand-md fixed-top">
<img src="logo.svg" />
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-right ">
<img src="avatar.png">
<li class="nav-item dropdown ">
<a class="nav-link ">Hello</a>
</li>
</ul>
</div>
</nav>
</header>
And then my sidebar :
<div class="container-fluid">
<nav class="col-sm-3 col-md-2 d-none d-sm-block sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item collapsed active" data-toggle="collapse" data-target="#home" >
<a class="nav-link active" href="#"> <img src="homeIcon.png" /> Home <span class="sr-only">(current)</span></a>
</li>
<ul class="sub-menu collapse " id="home">
<li class="nav-item "><a class="nav-link" href="#" > FirstMember</a></li>
<li class="nav-item "><a class="nav-link" href="#"> Second</a></li>
<li class="nav-item "><a class="nav-link" href="#"> Third</a></li>
<li class="nav-item "><a class="nav-link" href="#"> Fourth</a></li>
</ul>
<li class="nav-item">
<a class="nav-link" href="#"><img src="secondElement.png" /> Second Element</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="" /> History</a>
</li>
</ul>
</nav>
<app-home></app-home>
So in app.component.html I am writing my sidebar and navbar, and then is the content.
The issue is that in the topbar.. the where the logo stands, takes the whole row, which then pushes the button and the Hello on the next row.
Only the image inserted is smaller, but when I hover in the a href, it's in the whole row.
How do I fix this ?
And also, every element on the sidebar has an image as an icon, is it better that when the screen gets smaller, the text gets removed and only icons show, or do I make the sidebar appear as a dropdown on the top in smaller screens?
I am using angular5 and bootstrap4.
This is the css :
/* Move down content */
body {
padding-top: 5.5rem;
background-color: #F4F4F4;
}
.navbar {
background-color: #fff;
}
.nav.nav-link a {
color: #;
}
.sidebar {
position: fixed;
top: 69px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
background-color: #
}
.sidebar li{
padding-left: 5px;
}
.sidebar .nav {
margin-bottom: 20px;
}
.sidebar .nav-item {
width: 100%;
}
.sidebar .nav-item+.nav-item {
margin-left: 0;
}
.sidebar .nav-link {
border-radius: 0;
}
.flex-column a {
color: #fff;
}
.dropdown{
font-weight: bold;
color:#;
}
.nav-pills .active{
background-color: ;
font-weight:bold;
}
.nav-pills .nav-link.active {
background-color: ;
color: #1C2058;
}
I am using:
angular/cli: 1.5.0
Angular: 5.0.1
Node:8.9.1
bootstrap: ^4.0.0-alpha.6,
jquery: ^3.2.1,
From your example your anchor isn't using .navbar-brand and instead uses .navbar-left, which if I remember is Bootstrap v3. I can't find navbar-left as a class in v4 documentation:
<a class="navbar-brand" href="#">
<img src="logo.svg" />
</a>
You're also using nav-item for the dropdown, which is also incorrect it should be nav-link dropdown. I would get a new copy of your navbar from the v4 documentation and see if it works when you paste it in.
If it does, but just doesn't work in your application it might be due to ViewEncapsulation so you need to make sure your styles are either globally available (styles.scss) or they are in your navbar components SCSS file (navbar.component.scss or example.component.scss)
All you have left now is to comment out your custom CSS, and paste a fresh copy of the v4 navbar directly from the docs with no changes. That should work immediately. Then slowly start applying the custom changes until it breaks starting with just your branding.
I've followed this post accepted answer to vertical align my navbar links with my logo.
But my SignIn link also follow the vertical size and span to the full 50px of the navbar height:
How can I set a normal height to my Sign In button?
Thanks.
HTML:
<!-- /navbar -->
<nav class="navbar navbar-static-top bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header"
aria-controls="navbar-header">
☰
</button>
<!-- Logo -->
<a class="navbar-brand" href="/en/">
<img class="img" height="50px" src="/static/images/logo.png"/>
</a>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<ul class="nav navbar-nav">
<!-- logged-in nav items -->
<!-- <a class="nav-item nav-link " href="/en/product/">Product</a> -->
<!-- <a class="nav-item nav-link " href="/en/pricing/">Pricing</a> -->
<!-- <a class="nav-item nav-link " href="/en/clients/">Clients</a> -->
<a class="nav-item nav-link " href="/en/about/">About Us</a>
</ul>
<!-- to designers: I am not sure about the 'float: right' style -->
<ul class="nav navbar-nav" style="float: right">
<!-- ... -->
<a class="nav-item btn btn-primary" href="/en/accounts/login/">Sign In</a>
</ul>
</div>
</nav>
And CSS:
.navbar {
background-color: white;
border-bottom-color: lightgray;
border-bottom-style: solid;
border-bottom-width: thin;
}
.nav-item {
line-height: 50px;
}
You are applying the CSS class nav-item which sets line-height: 50px to "Sign in" button. Simply remove it like so:
<a class="btn btn-primary" href="/en/accounts/login/">Sign In</a>
That will make the button height normal. But you ll still have to add something like a top margin to vertically align the button with other links and logo.
.navbar-nav .btn {
margin-top: 10px; // Adjust the actual number of pixels accordingly
}
However you HTML code is also no quite valid. If the hackish code was not intentional you should refer Bootstrap Docs to correctly apply their HTML structures and CSS classes.
Here is my html using bootstrap (I'm sure bootstrap is installed correctly)
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
When it displays the three links are being displayed as block elements.
This is because in Bootstrap the css for li is this:
.nav>li {
position: relative;
display: block;
}
But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.
EDIT: Updated the snippit to work as requested (see comments below this answer)
.navbar .container-fluid>.navbar-header {
float: left;
margin-right: 10px;
}
.navbar .navbar-nav {
float: left;
margin: 5px;
}
.nav>li {
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div style="display: inline-block;">
<ul class="nav navbar-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
Currently on Bootstrap 4. The flex layout seems to be columnar by default in my ecosystem as well.
The most direct override for this use case:
.navbar-nav {
flex-direction: row;
}
Just ran into this issue with BS4. Learned I needed to add navbar-expand-lg class to my nav.
<nav class="navbar navbar-expand-lg">
I'm not saying the other answers are incorrect in any way, but all that is really needed to accomplish the original question is this entry in the subtheme's CSS file:
.nav.navbar-nav li {
float: left;
}
It should be noted that the class(s) before the li will vary depending on selections in the Appearance section of the theme and other factors. For example, right out of the box the class would have been .menu.nav li
I was facing the same problem.
Try this:
.navbar-nav {
display: inline-block;
}
.navbar-nav>li {
display: inline-block;
}
It worked for me
If you want like this way check this DEMO
<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="top_navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
</div>
</nav>
Currently on Bootstrap 4, the inline navbar can be achieved by adding class "nav-item" on list elements and class "nav-link" on a tags like this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Rebar</a>
</div>
<div>
<ul class="nav navbar-nav">
<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" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
So if your nav class is like that
change lg to sm or if -sm then change into -lg
You can make an inline navbar easily with this custom CSS class:
Css:
.nav.inline-navbar>li{
display: inline-block;
}
Now use it in your Html:
.....
<ul class="nav navbar-nav inline-navbar">
......
</ul>
.....
For a quuick modify, I add style="display: inline" in the below position:
<div class="collapse navbar-collapse" id="navbarSupportContent" style="display: inline">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" onclick="toggleContent('single')">One Line Param</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" onclick="toggleContent('multi')">Multi Line Param</a>
</li>
</ul>
</div>
just simply add this into your CSS and get the elements in one line
.navbar-nav {
display: inline-block;
}
.navbar-nav li {
display: inline-block;
}
In the snippet below, the highlighted line used to be <div class="nav navbar-nav">. In this case, just removing 'navbar-nav' solved the problem to me.
<nav class="navbar fixed-top" id="homehead">
<img class="navbar-brand" src="" height=50 width=50 alt="">
THIS LINE-> <div class="nav">
<a class="nav-item nav-link" href="">Link1<span
class="sr-only"></span></a>
<a class="nav-item nav-link" href="">Link2</a>
<a class="nav-item nav-link" href="">Link3</a>
<a class="nav-item nav-link" href="">Link4</a>
</div>