Mobile device.
I've got the below list with buttons. I want them not to line-break but that the user has to scroll to the right.
I've tried overflow-x:scroll, float:left etc. but cannot get it to work.
<ul class="nav nav-pills mb-2 ms-3" id="pills-tab" role="tablist" style="overflow: scroll;">
<li class="nav-item ">
<a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
</li> <li class="nav-item ">
<a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
</li> <li class="nav-item ">
<a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
</li><li class="nav-item ">
<a class="btn btn-dark-blue active me-1" id="pills-company-tab" data-bs-toggle="pill" href="#company-tab"
role="tab" aria-controls="pills-company" aria-selected="true">Företag</a>
</li>
</ul>
Solved it by - however downside is that the inner .nav has to have a fixed width.
.wrapper {
height: 50px;
width: 100%;
position: relative;
overflow: auto;
.nav {
position: absolute;
width: 500px;
}
}
Related
I posted a previous question concerning Positioning NavBar at Top of Page but Losing Clickability on Main Content. The question was answered but it has now led to an unintended consequence. At first it prevented a dropdown menu item from appearing above the content. I updated the dropdown with a z-index: 99999; position: relative; value to get it to display above the content but now it expands the height of the Header section. Here are 3 images.
Unselected Dropdown:
How it used to appear:
How it now appears using z-index: 99999;position: relative;
Here is the code for the navbar:
<header>
<div class="navbar navbar-inverse" id="edadTopNavigation">
<div class="container-fluid app-navbar">
<div class="navbar-collapse collapse app-navbar-text-section">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="adminDropdownMenuLink" href='#' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="fa fa-cog"></div> Admin</a>
<div class="dropdown-menu" aria-labelledby="adminDropdownMenuLink">
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="Acronym" asp-action="Index">Acronyms</a>
</div>
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">Users</a>
</div>
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">States</a>
</div>
<div>
<a class="nav-link text-dark" asp-area="" asp-controller="User" asp-action="Index">Countries</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
Here is the current CSS:
.navbar {
/* margin-bottom: 0px;*/
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
overflow: hidden;
z-index: 200
}
.dropdown-menu {
padding: 10px;
background-color: #fff;
background-color: #fffff2;
z-index: 99999;
position: relative;
}
What can I do to get the dropdown to display like image 2 instead of image 3?
I have 2 menus on the web page one needs to show at the center bottom and another one on the top right. This following code shows all of them in the same line.
Here is the layout I am trying to achieve.
**********************************************************************************
Home About User Login
Logo Heading
Link1 Link2 Link3 Link4 Link5
**********************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
You're super close! An mx-auto and mt-auto on the bottom-center menu and an mb-auto on the top-right menu are all you need to get it working.
NOTE: This does break on smaller screens as we're still treating everything as columns and columns do wrap. But, you could absolutely position the top-right menu if you need to on smaller screens.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav>li>a {
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png">Heading
</a>
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" ID="link1" runat="server">
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server">
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server">
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server">
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mb-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="LogOnUser" runat="server"></asp:Label>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Try this code. hope will help you.
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
.bottom_menu{
margin-top: 30px;
}
.top_menu{
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded justify-content-md-center">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="bottom_menu navbar-nav ml-auto text-md-center">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="top_menu navbar-nav ml-auto justify-content-md-center justify-content-start flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<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>
You mean Like This?
<style>
#header{
position: relative;
width: 100%;
height: 100px;
background-color: orange;
}
a{
display: inline-block;
width: 50px;
}
#logo, #navigation, #url{
position: absolute;
}
#logo{
top: calc(50%);
}
#navigation{
top: 0;
right: 0;
}
#url{
left: calc(50% - 125px);
bottom: 0;
}
</style>
<div id = "header">
<div id = "logo">
LOGO
</div>
<div id = "navigation">
<a>Home</a>
<a>About</a>
<a>User</a>
</div>
<div id = "url">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>
</div>
</div>
I'm trying to put a hover effect targeting the a-links in the navigation bar only (not the forwardslashes).
But I can't seem to access only the a-links, the effect ends up running along the whole navbar instead.
Seems to be a conflict with Bootstrap 4 here.
HTML
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
<!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
<a class="navbar-brand" href="https://www.facebook.com/GetMove.Official/">GET MOVE</a>
<button
class="navbar-toggler mr-left custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span> / </span><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#past-bookings">Archive<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe">Newsletter<span> / </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto: hola#getmove.net">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
<li class="nav-item">
<a
class="nav-link nav-social-icon"
target="_blank"
href="https://www.facebook.com/GetMove.Official/"
><i class="fab fa-facebook-square"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
><i class="fab fa-instagram"></i
></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
><i class="fab fa-soundcloud"></i
></a>
</li>
</ul>
</div>
</nav>
CSS
.nav-item:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.nav-item:hover:after {
width: 100%;
}
Fiddle here
https://codepen.io/pen/WNNPdxv
To solve this issue you should not put separators inside the anchor elements.
Below is an approach which eliminates the extra HTML using the content property.
This is similar to Bootstrap's breadcrumb.
But as you're already familiar, first some cleanup ^^
remove the span separators from nav-links
use the span for text nodes (could be handy to put the animation on there)
move the animation from :after to :before (a separator is logically after an element, except for the last-child perhaps, this also gives you the elements width where you can now control the right position.)
use the :after for the separator
provide full width for the main navigation and use flexbox to align the space it's using (flex-end, center, space-between, ...)
HTML changes
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav navbar-primary w-100 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<span>Home</span>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#past-bookings"><span>Archive</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span>About</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe"><span>Newsletter</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto: hola#getmove.net"><span>Contact</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-secondary flex-row justify-content-center flex-nowrap">
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.facebook.com/GetMove.Official/"><i class="fa fa-facebook-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"><i class="fa fa-soundcloud"></i></a>
</li>
</ul>
</div>
Solution
Now to solve the issue, place the animation on before and separator on the after pseudo elements.
.navbar-primary .nav-item:after {
content: "/";
position: absolute;
top: 0.25rem;
left: auto;
right: -0.5rem; /* control the amount of space for the separator */
}
.navbar-primary .nav-item:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.navbar-primary .nav-item:hover:before {
width: 100%;
}
In case you want to change the character, you have only one editing place.
DEMO
In case you want to change the animation without the padding I'd suggest to distract the nav-link padding using calc().
.navbar-primary .nav-link:before {
content: "";
position: absolute;
bottom: 0;
left: 0.5rem; /* nav-link padding-left */
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.navbar-primary .nav-link:hover:before {
width: calc(100% - 1rem); /* minus nav-link padding left and right */
}
DEMO
You should put the hover on the a-link, and then a-link position:relative, or put the class position-relative to the a-link.
.nav-item a {
position: relative;
}
.nav-item a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 1px solid black;
transition: 0.4s;
}
.nav-item a:hover:after {
width: 100%;
}
I have a problem in bootstrap 4 navigation, I want to set left Logo/Brand and center Navigation button and right login/My Account button, I have tried to solve this, but when I click navigation button on mobile it suddenly goes to the right, Please look at codeplay http://codeply.com/go/8FOVzFRkfM
<nav class="navbar navbar-expand-md navbar-light" >
<div class="container"> <a class="navbar-brand text-primary" href="#">
<i class="fa d-inline fa-lg fa-stop-circle"></i>
<b> BRAND</b>
</a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
<span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">My Account</a></span>
</div>
</nav>
You just need to use on order-md-0 order-last the navbarcollapse so that it is positioned last on mobile screen widths (when the Navbar is collapsed)...
<div class="collapse navbar-collapse order-md-0 order-last" id="navbar4">
<ul class="navbar-nav ml-auto">
<li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
</ul>
</div>
https://www.codeply.com/go/KkYoATqtFy
Related: Bootstrap NavBar with left, center or right aligned items
The container inside the navbar is a flex having justify-content: space-between, Hence navbar-collpase which is initially hidden gets displayed on toggle gets pushed below.
Solution:
Making the navbar-collpase positioned absolute to the navbar will fix the problem.
Example:
#media only screen and (max-width: 600px) {
.navbar-collapse{
position: absolute;
width: 100%;
top: 56px; /*height of navbar in mobile*/
}
}
How do I center my navigation links with bootstrap and CSS with 2 links on the far right. I will replace these 2 links with buttons and graphics later.
Here is a link to how it currently looks. The main navigation needs to be centered and the 2 links far right. http://www.woodenpalette.com/index2.html
This is what I have so far:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="drawings.html">Drawings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="eBook.html">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="learn_how_to_draw.html">Learn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="drawing_workshops.html">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
<ul class="nav justify-content-end">
<a class="nav-link" href="contact.php">Login</a> |
<a class="nav-link" href="contact.php">Register</a>
</ul>
</nav>
.navbar {
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.navbar ul{
text-align: center;
float: right;
margin: auto;
overflow: hidden;
}
Here is the correction:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav fix-center">
<li class="active">Home</li>
<li>Drawings</li>
<li>Book</li>
<li>Learn</li>
<li>Workshop</li>
</ul>
<ul class="nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign
Up</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a>
</li>
</ul>
</div>
</div>
.fix-center{
display:block;
margin:0 auto;
text-align:center;
}
.nav li{
display:inline-block;
}
.navbar-right{
position:absolute;
right:0;
top:0;
}