I am fairly new to css and while working on a project I couldn't get the Inline-block code to work, and I cant understand why. I want to arrange the links in my navbar menu horizontally rather than vertically.
<nav class="navbar">
<div class="max-width">
<div class="logo">Roulathul <span>Uloom.</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
This is my navbar HTML code.
.navbar .menu .li{
list-style: none;
display: inline-block;
}
And this is where I used the inline block. Any Tips?
Use:
.menu {
display: flex;
}
This is how I mainly center my navbars, just use the display: flex and justify-content: to either space out the elements or center them.
More info on the flex property
.menu{
list-style: none;
display: flex;
justify-content: space-evenly;
}
I added padding for space and removed the default list styling, hope this helps:-
.navbar {
display: flex;
align-items: center;
top: 0px;
}
.navbar ul {
display: flex;
}
.navbar ul li {
list-style: none;
}
.navbar ul li a {
display: block;
padding: 5px 22px;
text-decoration: none;
}
<nav class="navbar">
<div class="logo">
<a href="#">Roulathul <span>Uloom.</span>
</a>
</div>
<ul>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Skills</li>
<li class="item">Teams</li>
<li class="item">Contacts</li>
</ul>
</nav>
Related
I'm new to coding and trying to figure out why my nav li's will not display horizontally? I've tried a few things which I've noted in the code below.
The catch here is, I must use floats instead of flexbox.
header nav>* {
float: left;
width: 7%;
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li {
width: 100px;
float: right;
display: block;
text-decoration: none;
/*margin-left: 2px;
display: inline; not working*/
}
<header>
<nav>
Courses
<form action="">
<input type="text" placeholder="Search">
</form>
<img class="icon" src="#">
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
I have tried changing the specificity to a class or id and that hasn't fixed anything. I should also note that 'text-decoration' is not working for the li but is working for the a 'courses'? * border: box-sizing is also at the top of the css sheet.
This is what it looks like on the browser
I am very new to coding and this one has had me stumped for hours. T
First of all, spacings between attributes in html files have no effect at all on the browser display, and same for spacing in css files.
The second thing, I'm not sure why you don't want to use flex (it's handy here - you set the display of the parent attribute (ul) to display: flex; flex-direction: row; and it will do the trick).
But if you don't want to use it, there are 2 other tricks:
#1
ul {
display: contents; /* this will make the parent act like it doesn't exist - and then do whatever you want with the children*/
}
li {
display: inline-block;
}
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
#2 grid
ul {
display: grid;
grid-template-columns: max-content max-content max-content; /*instaed of max-content, you can assign the width you want for each li*/
}
li {
margin : 5px;
list-style: none;
}
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
You can use flexbox to arrange them either column or row. Declaring display: flex; should apply what you're trying to do. See the snippet below:
header nav>* {
float: left;
width: 7%;
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li {
width: 100px;
float: right;
display: block;
text-decoration: none;
/*margin-left: 2px;
display: inline; not working*/
}
#SideBar{
display: flex;
gap: 5px;
}
<header>
<nav>
Courses
<form action="">
<input type="text" placeholder="Search">
</form>
<img class="icon" src="#">
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
More on flexbox here.
Use this on css.....
#SideBar{
display: flex;
}
header nav>* {
float: left;
/*width: 7%;*/
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li{
width: 100px;
float: right;
/*display: block;*/
text-decoration: none;
margin-left: 2px;
display: inline;
}
<header>
<nav>
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
The problem
is you have used width: 7%; to header nav>*
Weird one
its weird that you have used display: block; along with display: inline;
Solution
I have commented the The problem and Weird one,run the snippet it should work
I have an img (logo), a h1 (name of the site) and an ul (nav bar). Currently, the imgand theh1are on the same line (both aligned left) which is what I want. Myulis one line down and i want it next to theh1, aligned right. How can I do that? I've tried display: inline-block;withwidth: auto;` but that didn't work.
HTML:
<header>
<img src="/images/logo.png" alt="Logo" id="logo">
<h1>Title</h1>
<nav>
<ul>
<li>Home |</li>
<li>Gallery |</li>
<li>About</li>
</ul>
</nav>
</header>
And the CSS:
h1 {
display: inline-block;
width: auto;
}
ul {
list-style: none;
display: inline-block;
width: auto;
}
ul li {
display: inline;
}
I would really appreciate some help, been stuck at this for too long
You can do that with easily css grid, just add header and nav css classes
header {
display: grid;
grid-template-columns: repeat(2, auto) 1fr;
align-items: center;
}
nav {
justify-self: end;
}
h1 {
display: inline-block;
width: auto;
}
ul {
list-style: none;
display: inline-block;
width: auto;
}
ul li {
display: inline;
}
<header>
<img src="/images/logo.png" alt="Logo" id="logo">
<h1>Title</h1>
<nav>
<ul>
<li>Home |</li>
<li>Gallery |</li>
<li>About</li>
</ul>
</nav>
</header>
This question already has answers here:
Keep the middle item centered when side items have different widths
(12 answers)
Closed 2 years ago.
I have the following code snippet (only HTML and CSS)
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
As you notice, the middle menu (the nav with class .menu2) is equally spaced between .menu1 and .menu3 because of the CSS property justify-content: space-between; in .container. This is correct.
What I need however, is to make sure that .menu2 is in the center of .container. In other words, it will NOT be equally spaced between .menu1 and .menu3. I want it dead center inside .container (and do not worry about menu items overlapping; I will have less menu items in each menu, so they will not overlap. I just added a lot of them here to demonstrate the spacing issue). Also, .menu1 should be also left aligned, and .menu3 should be right aligned (as they are right now).
How do I do that?
Thanks.
it seems like a grid would be better than a flex in my opinion.
you can then change the initial and last ul to display: inline-flex
then, for the last ul to be aligned to the end, you add to its nav element (class='menu3') a property text-align=end
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid black;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
.menu1 ul{
display: inline-flex;
}
.menu3{
text-align: end;
}
.menu3 ul{
display: inline-flex;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
Do you have to use flex? Otherwise it is possible to move menu 2 to the center with position absolute.
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
position: relative;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
.menu2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<html>
<body>
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
</body>
</html>
I know it is not Flexbox but you may want to look at CSS grid-layout.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid black;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none;
padding: 0 5px;
}
<html>
<body>
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.5</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
</body>
</html>
I would set the .menu1-3 to different flex rules, having those on the outside trying to talk equally much of the space while the one in the middle takes just what it needs.
The overflow: hidden is important to make sure content doesnt over-span the flex-base. But there are other rules with same effect depending on what behaviour of the items you want (like flex-wrap to wrap the items to the next line)
Depending on what you want you can consider giving the middle column a specific flex-base like fixed pixel or percentage (like all 3 .menu get 33.33%). Add margin (to middle column) as well if needed.
The solution with grid and the absolute positions might also do the job depending on that you want. Position: absolute has the best browser support, my flex solution works on most browsers these days. Grid also should but has the worst coverage as far as i know
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
.menu1, .menu3 {
flex: 1 1 50%;
overflow: hidden;
}
.menu1 ul {
justify-content: flex-start
}
.menu2 ul {
justify-content: flex-end
}
.menu2 {
flex: 0 0 auto;
}
<html>
<body>
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
</body>
</html>
I'm trying to create a simple nav bar for a portfolio site. My HTML and CSS is below. I can not figure out how to evenly space the '''li''' item evenly. I can't apply justifiy-content:space-evenly to the UL because the same code is being applied to the '''div class="headerContainer'''
.headerContainer {
display: flex;
background-color: lightblue;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
display: flex;
}
li a {
text-decoration: none;
}
<header>
<div class="headerContainer">
<div class="logo">Robert Emmet</div>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
.headerContainer {
display: flex;
background-color: lightblue;
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
display: flex;
width: 100%;
justify-content: space-evenly;
}
nav {
width: 100%;
}
<header>
<div class="headerContainer">
<div class="logo">Robert Emmet</div>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
I tried placing two nav bars under each other but I am facing difficulty in aligning the second nav bar in respect to the first one. I didn't quite understand why the second nav bar does'nt float right.
Below are my html and css codes.
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
Thank you.
I found out that it is caused by the container class.
You can either remove the container or change float: right to display: inline-block
Don't use float:right instead use display:inline
why inline? inline - basically it starts with new line and occupy the whole parent size
I also combine both header_nav1 and header_nav2 on 1 CSS since both of it has the same layout
Here, check the snippet codes below and try seeing it also in full page. Hope it helps.
.header_nav1, .header_nav2 {
display: inline;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width:1024px;
}
.header_nav1 ul li{
padding-top: 10px;
padding-right:10px;
list-style-type: none;
display: inline;
}
.header_nav2 ul li{
display: inline;
list-style-type: none;
padding-right:15px;
max-width:1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>