<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.!
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
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 -->
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 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
I have a aside which is of 260px width. when i try to place my user-icon and name info, there is too much of right-margin.
<div class="rightBox pull-right" href="#">
<ul class="navbar-nav navbar-right">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Karl Cadigan</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
Below is my fiddle. I want to bring the user-icon and the user-name to left leaving the drop-down icon at right.
http://jsbin.com/kugudaho/6/edit
Add the following class in your CSS. Use display:inline-block to show the info next to each other.
ul.navbar-nav
{
position:relative;
}
ul.navbar-nav li {
list-style: none;
display:inline-block;
}
.glyphicon{position:absolute; right:15px; top:15px;}
DEMO
If I understand it right this is what you need
HTML Markup
<div class="rightBox" href="#">
<ul class="navbar-nav">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li class="glyph">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Frank</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
CSS
i {
list-style: none;
}
.rightBox{ height: 60px; width:260px; border:1px dashed red; }
.fa-user {
position: relative;
background: #666666;
}
.fa-user:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #89cd17 transparent transparent;
}
.navbar-nav li.glyph {
float: right !important;
}
.navbar-nav {
float: inherit;
padding-left: 10px;
}
I hope I understood what you need.
I think you're better off starting with a standard Bootstrap dropdown, and customizing where needed. Uses a lot less custom CSS (if any) and is easier to maintain...
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-2x fa-border fa-user"></i> <!-- put this inside the a element to bind it to the text -->
Frank
<span class="glyphicon glyphicon-chevron-down"></span> <!-- bootstrap used the class "caret" to designate a dropdown, but you can change it with a glyphicon if you need to -->
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
</ul>
</div>
Example:http://www.bootply.com/f9WYqJqLmd