I am trying to make a navbar but my text is flowing off of the screen even though I have overflow: hidden on my ul
Here is my snippet
.header {
background-image: url('img/bg.jpg');
background-size: 100%;
background-repeat: no-repeat;
color: white;
width: 100vw;
height: 100vh;
}
.heading {
display: inline-block;
font-size: 3em;
}
.nav-items {
overflow: hidden;
}
<div class="header">
<div class="nav">
<!-- <img src="img/logo.png" alt="logo" class="logo"> -->
<ul class="nav-items">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Portfolio</li>
<li class="nav-item">Contact</li>
</ul>
</div>
<h1 class="heading" id="heading"></h1>
</div>
Related
when i realized through Firefox inspector showing overflow in body element," is present in the page.I removed it(from inspector) but problem remains after refreshing the page.I tried using min-max h,w,still no changes.I am not able to catch the keyword i need solution.
code:
#navbar {
display: flex;
align-items: center;
position: relative;
top:0px;
margin-top: -18px;
}
#navbar::before {
content: "";
background-color: black;
height: 100%;
width: 100%;
position: absolute;
top:0px;
left:0px;
z-index: -1;
opacity: 1;
}
/* Nav Bar:Logo And Image */
#logo {
margin: 11px 30px;
}
<nav id="navbar">
<div class="logo">
<img src="logo1.png" alt="w8.com" id="img1">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Top Searches</li>
<li class="item">About Us</li>
<li class="item">Places</li>
</ul>
</nav>
This is the portion where it is showing inverted commas in the top left corner.
**>**And this is the code from the inspector:
<body>"
<!-- <style>
#img1{
height: 66px;
margin: 8px 12px;
border-radius: 36px;
}
</style> -->
<nav id="navbar">
<div class="logo">
<img src="logo1.png" alt="w8.com" id="img1">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Top Searches</li>
<li class="item">About Us</li>
<li class="item">Places</li>
</ul>
</nav>
i tried removing and rewriting the code but it didn't help.And about overflow i am not able do fix overflow.
I tried to add the footer, but it adds on top of the background-image at the bottom of my page. I tried to remove the "display:fixed" from footer, but the horizontal scroll shows up. How can I fix this?
I want the footer to be always visible on the screen when you scroll the page.
Here is more detail code snipet, I would appreciate if you guys can help with this.
html,
body {
height: 100%;
font-family: 'Google Sans',Roboto,Arial,sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
body {
background-image: url("/img/bg-new-edit.jpg");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: relative;
}
/* Basic styling */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
h2 {
font-weight: 350;
margin: 580px 40px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: gray;
text-align: center;
background-color: white;
}
}
<body>
<nav>
<ul class="menu">
<li class="logo"><img class="logo" src="img/TARRAHJEWELRY-LOGO.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Bridal Jewelry</a>
<ul class="submenu dropdown-content">
<li class="subitem">Engagement</li>
<li class="subitem">Men Wedding</li>
<li class="subitem">Women Wedding</li>
</ul>
</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Collection</a>
<ul class="submenu dropdown-content">
<li class="subitem">Ring</li>
<li class="subitem">Necklace</li>
<li class="subitem">Earring</li>
<li class="subitem">Bracelet</li>
</ul>
</li>
<li class="item">Contact
</li>
<li class="item button">My Account</li>
<li class="item button">Cart</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<h2>We believe people who live life in their special way,<br> deserve unique jewelry.</h2>
<footer><p>Footer</p></footer>
<div class="clearfix"></div>
</body>
select the footer
footer {
bottom: 0;
position: fixed
}
note that this will cause a scroll bar to appear
to remove the scroll bar
body {
overflow: hidden
}
That should solve your problem
Trying to get my UL to be horizontal, while also using CSS Grid. I basically have two columns than span the whole page and in the second one (on the right) I want to have my UL appear horizontally. I have tried both display: block and inline and neither seem to be having the desired effect.
Any ideas?
I have eliminated all my testing in the css, so currently there is no reference to the ul
HTML
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #3e2723;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
You should add the code the the list elements (li). Adding inline display to list (ul) will not change much.
Your problem has basically nothing do do with CSS Grid, since you're not using grid directly on the list.
Also there are many ways to do it, using display: inline, display: inline-block, using flexbox or even grid.
Solution using display: inline or display: inline-block
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul li {
display: inline;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
Solution using display: flex
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul {
display: flex;
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
Solution using display: grid
(One way of doing it)
#nav-bar {
display: grid;
grid-template-columns: 50% 50%;
background-color: #eee;
padding: 10px;
border-radius: 10px;
}
#header-img {
object-fit: cover;
width: 70%;
max-height: 100%;
float: left;
}
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<header>
<nav id="nav-bar">
<div class="image">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
</div>
<div class="links">
<ul>
<li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
<li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
</ul>
</div>
</nav>
</header>
to get the <li> elements in the <ul> appear horizontally, you can simply add the following to the CSS, making <li> elements to display:inline-block or display:inline:
li{
display: inline-block;
}
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I'm a beginner. I tried to build a navbar with flex but failed to get the desired result.
what I want is
Logo Home About Services Contact
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.nav {
display: flex;
background-color: gray;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="nav">
<img src="./Logo.png" width="80px" class="logo" alt="">
<nav>
<ul>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
font-family: monospace;
}
.header {
display: flex;
background-color: gray;
width: 100%;
}
nav {
width: 100%;
}
ul {
display: flex;
justify-content: space-between;
}
.menu {
list-style: none;
display: inline-block;
padding: 20px
}
a {
text-decoration: none;
}
.con {
float: right;
}
<header class="header">
<nav>
<ul>
<img src="./Logo.png" width="80px" class="logo" alt="">
<div>
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</div>
<li id="contact" class="menu con">Contact </li>
</ul>
</nav>
</header>
I believe this is what you are looking for
You can use display flex and justify-content property to move items.
.nav
{
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center
}
.img-wrapper
{
width:33.33%;
}
.nav-items-center
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.nav-item-right
{
width:33.33%;
display:flex;
justify-content:space-evenly;
align-items:center;
}
<header class="nav">
<div class="img-wrapper">
<img src="./Logo.png" width="80px" class="logo" alt="Logo">
</div>
<ul class="nav-items-center">
<li id="home" class="menu">Home </li>
<li id="about" class="menu">About </li>
<li id="services" class="menu">Services </li>
</ul>
<ul class="nav-item-right">
<li id="contact" class="menu con">Contact </li>
</ul>
</header>
I am wondering how to center elements within a div but keep the text left aligned.
Here is a jfiddle of what I have so far. I want the text to be in the middle of the div but to maintain its left justification.
http://jsfiddle.net/MgcDU/5994/
HTML:
<div class="span4" id="middleFooter">
<div class="mcont" >
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<div class="mrow"> <li class="tcell">Contact Us</li> </div>
<div class="mrow"> <li class="tcell">About Us</li> </div>
<div class="mrow"> <li class="tcell">Copyright Information</li> </div>
<div class="mrow"> <li class="tcell">Terms & Conditions</li> </div>
</ul>
</div>
</div>
CSS:
#middleFooter {
color: #ccc2a0;
}
.mcont {
background-color: blue;
}
.mrow li {
background-color: red;
margin-left: auto;
margin-right: auto;
}
.mrow h5 {
display: table-row;
background-color: yellow;
}
.tcell {
display: table-cell;
}
You can try something like this - http://jsfiddle.net/GxgrL/
html:
<div class="span4" id="middleFooter">
<div class="mcont" >
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<li class="tcell">Contact Us</li>
<li class="tcell">About Us</li>
<li class="tcell">Copyright Information</li>
<li class="tcell">Terms & Conditions</li>
</ul>
</div>
</div>
css:
#middleFooter {
color: #ccc2a0;
}
.mcont {
background-color: blue;
}
li {
background-color: red;
display: block;
text-align: center;
}
li a {
background-color: green;
display: inline-block;
margin: 0 auto;
width: 170px;
text-align: left;
}
.mrow {
text-align: center;
}
.mrow h5 {
display: inline-block;
background-color: yellow;
text-align: left;
width: 170px;
}
You can get this effect by making the container div 50% width then floating it to the right. So in your fiddle add:
.mcont {
width: 50%;
float: right;
}
If you want to keep the blue background you'll need to wrap all the .mrow divs in a wrapper and apply the styles above so like:
<div class="mcont" >
<div class="wrapper">
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<div class="mrow"> <li class="tcell">Contact Us</li> </div>
<div class="mrow"> <li class="tcell">About Us</li> </div>
<div class="mrow"> <li class="tcell">Copyright Information</li> </div>
<div class="mrow"> <li class="tcell">Terms & Conditions</li> </div>
</ul>
</div>
</div>
Then:
.wrapper {
width: 50%;
float: right;
}
Just assign your .mrow divs a width and give them margin:0px auto and they will be center aligned.
.mrow{
width:20%;
margin:0px auto;
}
Here's an example of your fiddle with that style added: http://jsfiddle.net/HcQcn/