I tried to play all around the codes, but I didn't find a solution. Can anyone help me to center all content inside the border box?. I tried to search everywhere and I can't find the solution. Advance Thanks.
https://i.stack.imgur.com/f17JF.png
.menubar {
width: 50vw;
height: 5rem;
background-color: #283747;
margin: auto;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: relative;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
}
li.navbar {
list-style-type: none;
display: inline-block;
padding: .8rem 6rem 1rem 3rem;
text-transform: uppercase;
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
}
li.navbar a {
color: #000;
text-decoration: none;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
If you want to center the nav inside the .menubar container, give it these styles: display: flex; justify-content: center; align-items: center;. Then remove the default browser left padding on .mainMenu by giving it padding: 0.
.menubar {
width: 50vw;
height: 5rem;
background-color: #283747;
margin: auto;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
padding: 0;
}
li.navbar {
list-style-type: none;
display: inline-block;
text-transform: uppercase;
background: #fff;
border-radius: 1rem;
}
li.navbar a {
color: #000;
text-decoration: none;
display: inline-block;
padding: 1rem 3rem 1rem 3rem;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
Do You want this?
.menubar {
height: auto;
background-color: #283747;
margin: auto;
position: relative;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
vertical-align: middle;
}
li {
list-style-type: none;
display: inline-block;
padding: 1rem 4rem 1rem 3rem;
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
margin: 30px auto;
}
li.navbar a {
color: #000;
text-decoration: none;
text-transform: uppercase;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
jsfiddle
Related
I am trying to create a navbar in my site, but every time I try to align the logo to the left the page selection is put higher, anyone have a solution?
Screenshot:
This is the html code:
<div class="NavBar">
<ul class="Items">
<li class="Logo">
<img src="images/logo1.png" alt="IM2B - Play your brand">
</li>
<li class="Links">
<a class="active" href="#home">Home</a>
News
Contact
About
</li>
</ul>
</div>
This is the css code:
.NavBar {
list-style-type: none;
overflow: hidden;
background-color: #333;
padding: 20px;
}
.NavBar .Items {
margin: auto;
width: 60%;
text-align: center;
list-style: none;
}
.NavBar .Logo {
float: left;
}
.NavBar .Links {
display: inline-block;
padding: 0px 16px;
}
.NavBar .Links a {
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.NavBar .Links a:hover {
background-color: #ddd;
color: black;
}
.NavBar .Links a.active {
background-color: #04AA6D;
color: white;
}
Add flex property to your outside navitems' containers:
.NavBar .Items {
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
/* width: 60%; */
text-align: center;
list-style: none;
}
.NavBar .Links {
border: 2px solid white;
display: flex;
justify-content: space-around;
align-items: center;
}
Is this you were looking for? Look, there are 2-levels of display:flex for alignments.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.NavBar {
list-style-type: none;
background-color: #333;
padding: 10px;
}
ul li {
list-style-type: none;
}
.NavBar .Items {
display: flex;
justify-content: space-around;
}
.NavBar .Links {
display: flex;
}
.NavBar .Links a {
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
padding: 10px 20px;
display: inline-block;
height: 40px;
align-self: center;
}
.NavBar .Links a:hover {
background-color: #ddd;
color: black;
}
.NavBar .Links a.active {
background-color: #04AA6D;
color: white;
}
img {
height: 60px;
width: 100px;
}
<div class="NavBar">
<ul class="Items">
<li class="Logo">
<img src="https://picsum.photos/200/300" alt="IM2B - Play your brand">
</li>
<li class="Links">
<a class="active" href="#home">Home</a>
News
Contact
About
</li>
</ul>
</div>
I have this navbar where the listed items do not span the complete height of the navbar. Most of the posts I have seen have talked about padding and margin, but none of what I have should effect what is going on. Any tips would be great, thanks.
#navbar {
display: flex;
justify-content: flex-end;
width: 100%;
top: 0;
left: 0;
padding: 0;
position: fixed;
background-color: slategray;
}
#nav-list {
display: flex;
margin-right: 5rem;
list-style: none;
}
#nav-list a {
display: block;
padding: 1rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
border: 1px solid black;
}
#nav-list a:hover {
background: grey;
}
<nav id="navbar">
<ul id="nav-list">
<li><a>item1</a></li>
<li><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</nav>
EDIT: Thank you all for the fast answer, the margin was the problem and I swear I played with that and it changed nothing. I appreciate all the possible solutions that resolved this and teaching me the default behavior of ul margins!
Replace the margin-right rule in the #nav-list ruleset with a complete margin rule: margin: 0 5rem 0 0;. This will reset the browser's default styling and make it work as you wanted.
#navbar {
display: flex;
justify-content: flex-end;
width: 100%;
top: 0;
left: 0;
padding: 0;
position: fixed;
background-color: slategray;
}
#nav-list {
display: flex;
/*margin-right: 5rem; instead of this*/
margin: 0 5rem 0 0; /*use this*/
list-style: none;
}
#nav-list a {
display: block;
padding: 1rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
border: 1px solid black;
}
#nav-list a:hover {
background: grey;
}
<nav id="navbar">
<ul id="nav-list">
<li><a>item1</a></li>
<li><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</nav>
Now this will work...
#navbar {
display: flex;
justify-content: flex-end;
width: 100%;
top: 0;
left: 0;
padding: 0;
position: fixed;
background-color: slategray;
}
#nav-list {
margin: 0; /*added*/
display: flex;
margin-right: 5rem;
list-style: none;
}
#nav-list a {
display: block;
padding: 1rem;
color: white;
font-size: 1.5rem;
text-decoration: none;
border: 1px solid black;
}
#nav-list a:hover {
background: grey;
}
<nav id="navbar">
<ul id="nav-list">
<li><a>item1</a></li>
<li><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</nav>
ul by default has margin-block-start: 1em and margin-block-end: 1em.
To fix this add margin: 0 to #nav-list.
#nav-list {
display:flex;
margin:0;
margin-right: 5rem;
list-style: none
}
If you are only concerned with height, just remove margin-top and margin-bottom from #nav-list.
Try this:
#nav-list {
display: flex;
list-style: none;
margin: 0 80px 0 16px;
}
I'm kinda confused and tried out everything I'm able to try. Searching stack overflow I couldn't find the similar problem. So a little background, I'm trying to make a navigation menu with flexbox like in the picture down below, but I can't display link's border-bottom out of its parent div. Is it even possible?
This is what I want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.header {
background: #44433e;
}
.header__menu {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.header__logo {
padding: 10px 0;
}
.menu__list {
display: flex;
list-style: none;
align-items: center;
}
.menu__item {
margin-left: 15px;
}
.menu__item:first-child {
margin-left: 0;
border-bottom: 3px solid #18cfab;
}
.menu__link {
display: inline-block;
font-family: "Montserrat-bold";
color: #b8b8b8;
font-size: 13px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
}
.menu__link-active {
color: #18cfab;
}
<header class="header">
<div class="header__wrap wrap">
<nav class="header__menu menu">
<div class="header__logo">
Logo
</div>
<ul class="menu__list">
<li class="menu__item">home</li>
<li class="menu__item">about</li>
<li class="menu__item">skills</li>
<li class="menu__item">service</li>
<li class="menu__item">work</li>
</nav>
</div>
</header>
You can achieve this using an :after element with a position: absolute:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
}
.header {
background: #44433e;
}
.header__menu {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.header__logo {
padding: 10px 0;
}
.menu__list {
display: flex;
list-style: none;
align-items: center;
}
.menu__item {
margin-left: 15px;
position: relative;
}
.menu__item:first-child {
margin-left: 0;
}
.menu__item:first-child:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background-color: #18cfab;
}
.menu__link {
display: inline-block;
font-family: "Montserrat-bold";
color: #b8b8b8;
font-size: 13px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
}
.menu__link-active {
color: #18cfab;
}
<header class="header">
<div class="header__wrap wrap">
<nav class="header__menu menu">
<div class="header__logo">
Logo
</div>
<ul class="menu__list">
<li class="menu__item">home</li>
<li class="menu__item">about</li>
<li class="menu__item">skills</li>
<li class="menu__item">service</li>
<li class="menu__item">work</li>
</nav>
</div>
</header>
I am trying to get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1. As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.
#wrapper{
background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid ;
text-align: right;
display:inline-block;
}
nav a{
text-decoration: none;
border: 1px solid;
width: 100%
}
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
Make the li elements inline-block, and add box-sizing:border-box:
CSS: #wrapper {
background-color: #FFFFFF;
color: #000066;
width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
box-sizing: border-box;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
box-sizing: border-box;
}
nav {
display: inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav a {
text-decoration: none;
border: 1px solid;
width: 100%;
}
nav a:link {
color: cyan;
}
nav a:visited {
color: #6699FF;
}
nav a:hover {
color: gold;
}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
I don't understand your question. what did you want?.But Is this you want?
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;}
main {margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 98% !important;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav > ul > li {
float: left;
display: inline-block;
}
nav a{text-decoration: none;
border: 1px solid;
}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
</header>
</div>
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body {
margin: 0;
}
nav {
background-color: #333;
display: flex;
justify-content: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
align-items: center;
}
li {
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<body>
<nav>
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</nav>
</body>
You can add position: relative; and a value for bottom or top- in my snippet bottom: 4px;:
This reserves the space originally taken by the element (without position: relative;), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
position: relative;
bottom: 4px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>