When reducing the screen size, menu items become vertically aligned. I want it to remain horizontally aligned. Justify content doesn't work
Image of the issue can be seen here.
Here is a link to the problem : https://bclinico.helvatica.com/faq/
<div id="sticky-header-navbar" style="display: flex; align-items: center; height: 80px; margin: auto; justify-content: space-between;">
<div class="container ulockd-pdng0" >
<nav class="nav" role="navigation" style="z-index: 999; position: relative; margin: 0; padding: 0;">
<span style="float: left; font-weight: 600; margin: 0; padding: 0;">
hekim_nav()
</span>
<ul class="ulockd-quote-btn hidden-xs hidden-sm">
<li> Get a Quote </li>
</ul>
<ul>
<li class="shop-dropdown dropdown inner_page">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: white!important;" >
<i class="fa fa-shopping-bag"></i>
<span class="badge">
global $woocommerce;
echo $woocommerce->cart->cart_contents_count;
</span>
</a>
<ul class="dropdown-menu pull-right cart-list dropdown-menu-right" style="color: white!important;">
<li>
storefront_header_cart();
</li>
</ul>
<li><div class="ddd search_innerpage fa fa-search " style="margin-top: 5px; color: white!important;"\>
</li>
</li>
</ul>
</nav>
</div>
</div>
<!-- /nav -->
Related
I want to center the menu items on my navbar. Right now my navbar looks like this:
I want to center the "Users", "Admin", and "records" of the navbar. I also want to move the logo a little bit center-aligned rather than at the bottom edge of the nav bar.
Below is my navbar code:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<div class="nameLogo">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Test</span><br />COMPANY OF TEST</span>
</span>
</div>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<div>
<ul class="navbar-nav ml-auto">
<%-- <li class="nav-item active">Home <span class="sr-only">(current)</span></li>--%>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<%-- <a class="dropdown-item" href="#">Sections</a>--%>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</ul>
</div>
</div>
<div class="sign">
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
<div class="welcome">
<ul>
<li class="nav-item" style="margin-right:5px" >
Welcome <%=userName %>
</li>
</ul>
</div>
</div>
</nav>
I tried using Bootstrap Justify-center, but that didn't work.
Any help will be greatly appreciated.
When constructing a grid, think of it like building blocks, but defined as "wrappers". So a good way to start is to look at what kind of blocks will make up the menu.
In your case, I would say that there are 4 main wrapper parts,
The navbar itself.
The Logo.
The menu items (User, Admin, Records).
The action(s), i.e. Sign Out.
With all of this in mind, we can start constructing our grid. Flex-box has various, handy properties, such as: justify-content and align-items.
Example with my proposed structure in mind:
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex: 0 0 100%;
flex-wrap: wrap;
max-width: 100%;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.no-gutters {
--bs-gutter-y: 0;
--bs-gutter-x: 0;
}
.navbar {
padding-left: 15px;
padding-right: 15px;
background-color: #324c3b;
color: #fff;
}
.nav-container {
max-height: 100%;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
overflow: hidden;
}
.nav-logo > img {
display: flex;
height: auto;
max-height: 100%;
width: 100%;
object-fit: contain;
}
.text-center {
text-align: center;
}
<nav class="navbar row">
<div class="nav-container row">
<div class="nav-logo col-1">
<img src="https://picsum.photos/150/100" alt="Logo" />
</div>
<div class="menu-container col-8">
<div class="row no-gutters">
<div class="menu-item col-4 text-center">
User
</div>
<div class="menu-item col-4 text-center">
Admin
</div>
<div class="menu-item col-4 text-center">
Records
</div>
</div>
</div>
<div class="actions-container col-1 text-center">
Sign Out
</div>
</div>
</nav>
Codepen: here.
Add the class justify-content-center to the div with id navbarSupportedContent, your items will become centered.
About the logo, I copied your code, and the logo-text seems to be on the same center line as the other items.
JSFiddle
Below is my code for the footer of a webpage I'm building:
<div class='footer'>
<footer class="page-footer font-small pt-4">
<div class="container text-center text-md-left">
<div class="row">
<ul class="list-unstyled">
<li>
Hello
</li>
<li>
Hello
</li>
<li class="dropdown">
<a class="footer-dropdown footerstyle dropdown-toggle" id="dropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Team
</a>
<div class="dropdown-menu sub-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="">Team members</a>
<a class="dropdown-item" href="">Our Story</a>
<a class="dropdown-item" href="">Join the team</a>
</div>
</li>
<li>
Hello
</li>
<li>
Hello
</li>
</ul>
</div>
</div>
</footer>
Below is the styling I've applied:
.dropdown-item {
font-family: Roboto-Regular;
background-color: #F0F0F7;
}
.dropdown-item:hover {
font-family: Roboto-Regular;
font-weight: bold;
background-color: #F0F0F7;
display: block;
cursor: pointer;
}
.dropdown:hover .dropdown-menu {
display: block;
font-family: Roboto-Regular;
background-color: #F0F0F7;
border-radius: 0;
cursor: pointer;
}
When I hover over the dropdown menu it doesn't show left-most border of the dropdown box. How can I make it so that it shows up?
I am using bootstrap 4 for my navbar, I can toogle down the hamburger button just fine but I can't toogle it back on the menu, it remains to be in a collapsed form. So how can I toogle it back to its menu?
I've tried data="collapse" on each nav-item just maybe it would work but it remained in a collapsed form.
.nav-fill .nav-item {
-webkit-box-flex: initial;
flex: initial;
text-align: initial;
}
ul li a.nav-link {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.02em;
}
.navigation .bg-light{
background-color: transparent !important;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Codeply</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" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
fyi: I placed my navbar under my header (because I needed to), could that be the case?
header{
display: flex !important;
flex-direction: column;
}
/*** HEADER *****/
.logo-wrapper img {
width: 100%;
display: block;
}
.logo-wrapper {
width: 100%;
display: block;
position: relative;
}
/* Navbar */
.nav-fill .nav-item {
-webkit-box-flex: initial;
flex: initial;
text-align: initial;
}
header {
background: url(../images/header_img.png) no-repeat top center transparent;
padding: 0 0;
background-attachment: inherit;
background-size: cover;
}
.header-bottom {
padding: 20px 0;
}
ul li a.nav-link {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.02em;
}
.navigation .bg-light{
background-color: transparent !important;
}
<header>
<div class="header-bottom">
<div class="container">
<div class="row">
<div class="icon-call col-md-4 col-xs-12 d-none d-md-block ">
<img src = "images/icon-call.png">xoxoxox
</div>
<div class="col-md-4 col-xs-12 col-sm-12">
<div class="logo-wrapper">
<img src = "images/logo.png" >
</div>
</div>
<div class="icon-social col-md-4 col-xs-12 d-none d-md-block">
<div class="social-media text-right">
<img src = "images/icon-fb.png" >
<img src = "images/icon-mail.png">
<img src = "images/icon-insta.png">
</div>
</div>
</div>
</div>
</div>
<div class="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Results</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
your code is working fine, but try to use all the links properly like below
<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>
header{
display: flex !important;
flex-direction: column;
}
/*** HEADER *****/
.logo-wrapper img {
width: 100%;
display: block;
}
.logo-wrapper {
width: 100%;
display: block;
position: relative;
}
/* Navbar */
.nav-fill .nav-item {
-webkit-box-flex: initial;
flex: initial;
text-align: initial;
}
header {
background: url(../images/header_img.png) no-repeat top center transparent;
padding: 0 0;
background-attachment: inherit;
background-size: cover;
}
.header-bottom {
padding: 20px 0;
}
ul li a.nav-link {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.02em;
}
.navigation .bg-light{
background-color: transparent !important;
}
<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>
<header>
<div class="header-bottom">
<div class="container">
<div class="row">
<div class="icon-call col-md-4 col-xs-12 d-none d-md-block ">
<img src = "images/icon-call.png">xoxoxox
</div>
<div class="col-md-4 col-xs-12 col-sm-12">
<div class="logo-wrapper">
<img src = "images/logo.png" >
</div>
</div>
<div class="icon-social col-md-4 col-xs-12 d-none d-md-block">
<div class="social-media text-right">
<img src = "images/icon-fb.png" >
<img src = "images/icon-mail.png">
<img src = "images/icon-insta.png">
</div>
</div>
</div>
</div>
</div>
<div class="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Results</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
I have tried couple solutions, but nothing that is working as I intended so far. I just want the links to be in the same level of indentation and in a block level manner. I am trying to get this accomplish without using absolute positioning, otherwise it breaks the rest of the code. Any help would be appreciated.
body {
margin-left: 40px; }
.bookmarks {
border: 1px solid gray;
width: 200px; }
.bookmarks ul {
list-style-type: none; }
.link4 {
box-sizing: border-box;
display: inline-block;
background-color: pink; }
.link4 .left-side {
height: 100%;
width: 80%;
color: white;
background-color: blue;
float: left; }
.link4 .right-side {
height: 100%;
width: 20%;
background-color: yellow;
float: right; }
.second-menu li {
background-color: lightgreen; }
.last-menu li {
background-color: lightgray; }
/*# sourceMappingURL=test2.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="col-md-6">
<div class="bookmarks">
<ul class="nav top-menu" id="affix-ul">
<li class="link1">
<a href="#">
Some Text on link 1
</a>
</li>
<li class="link2">
<a href="#">
Some Text on link 2
</a>
</li>
<li class="link 3">
<a href="#">
Some Text on link 3
</a>
</li>
<li class="link4 active">
<div class="left-side">
<a href="#">
<span>Some Text on link 4</span>
</a>
</div>
<div class="right-side">
<a href="#" class="arrow-up" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
<i class="fa fa-chevron-down"> ^
</i>
</a>
</div>
<ul id="hiddenMenuOne" class="collapse second-menu">
<li>
Sublink1
</li>
<li>
Sublink2
</li>
<li>
This is a sublink3 with a bit more text
</li>
<li>
sublink4
</li>
<li>
sublink5
</li>
<li>
sublink6
</li>
<li class="second-level-menu wrapper">
<div class="left-side">
<a href="#" class="">
Last sublink on submenu
</a>
</div>
<div class="right-side">
<a href="#" class="second-dropdown" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuTwo">
<i class="fa fa-chevron-down">^
</i>
</a>
</div>
<ul id="hiddenMenuTwo" class="collapse last-menu">
<li>
Tertiary 1
</li>
<li>
Tertiary 2
</li>
<li>
Tertiary 3 with a second line
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Just in case anyone wants to know the answer. I just removed the padding-left of the li and added a height property to the uls
<div class="other center_2">
<div class="container_2">
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
</li>
<li>
<a href="#work" onclick = $("#menu-close").click(); >Work</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
</div>
</div>
.centered_2 {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
}
http://shearelegancechicago.com/todd/
I'm trying to center the nav right dab smack in the middle when it opens up. I tried a fewed different tutorials nothing is working. The live link is including.
In CSS you have .centered_2 class - and in HTML you have center_2. Just change to center_2 in CSS and everything will work fine!
.center_2 {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
}
<div class="other center_2">
<div class="container_2">
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
</li>
<li>
<a href="#work" onclick = $("#menu-close").click(); >Work</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
</div>
</div>
Here is a demo.
You may also try this.
.sidebar-nav {
/* position: absolute; */ No use.
width: 250px;
margin: 0 auto; /*Set the margin as per your requirement. eg; 50px auto 0px*/
padding: 0;
list-style: none;
border: 1px solid red; /*just to highlight*/
}
Hope this help you.!