naufragio
Reputation: 73
"li" items overlapping in a navigation bar
I have this problem with a navigation bar: as you can see from the following two images the problem is that as I resize the browser window (second image) the items of the nav bar overlaps and also do not decrease their size in order to continue fitting in the screen. I would like them to stay in the same line while decreasing their size.
I have tried setting a font size expressed in % to the elements but it seems that it's not the solution...can you help me with that? thank you very much
The menu I'm talking about is this one:
<nav class="secondnav nascosta ">
<ul class="listsecondnav primissimo">
<li class="left dropdown prime">
<a href="#home" class="edition drop-btn">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true"> </span> </a>
<div class="dropdown-content dropmod">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</li>
<li class="left prime"><a href="#home" class="">Wed, Aug 30, 2017</a></li>
<li class="right prime"><a href="#news" class="subscribe ">SUBSCRIBE</a></li>
<li class="right prime"><a href="#contact" class="">SIGN IN</a></li>
</ul>
</nav>
HTML:
<!-- Non usare ROW perche' e' una classe definita nel bootstrap stilizzata...ti cambia margini padding ecc.occhio ai nomi delle classi che usi, se sono nel bootstrap potrebbero non darti il risultato che ti aspetti xke gia stilizzati -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>newsweek</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./regole.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<nav class="secondnav nascosta ">
<ul class="listsecondnav primissimo">
<li class="left dropdown prime">
<a href="#home" class="edition drop-btn">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true"> </span> </a>
<div class="dropdown-content dropmod">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</li>
<li class="left prime"><a href="#home" class="">Wed, Aug 30, 2017</a></li>
<li class="right prime"><a href="#news" class="subscribe ">SUBSCRIBE</a></li>
<li class="right prime"><a href="#contact" class="">SIGN IN</a></li>
</ul>
</nav>
<nav class="firstnav">
<ul class="listfirstnav">
<li class="left dropdown">
<a href="#home" class="edition drop-btn sparisci">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true"> </span> </a>
<div class="dropdown-content">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</li>
<li class="left"><a href="#home" class="sparisci">Wed, Aug 30, 2017</a></li>
<li class="right"><a href="#news" class="subscribe sparisci">SUBSCRIBE</a></li>
<li class="right"><a href="#contact" class="sparisci">SIGN IN</a></li>
</ul>
</nav>
<div class="title">
<h1>Newsweek</h1>
</div>
<nav class="secondnav">
<ul class="listsecondnav classic">
<li class="center"><a href="#home">U.S.</a></li>
<li class="center"><a href="#home">World</a></li>
<li class="center"><a href="#news">Business</a></li>
<li class="center"><a href="#contact">Tech & Science</a></li>
<li class="center"><a href="#contact">Culture</a></li>
<li class="center"><a href="#contact">Sport</a></li>
</ul>
</nav>
</header>
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<img src="a.jpg" alt="" class="imgtop">
</div>
<div class="col-lg-4 col-md-0 col-sm-4 col-xs-4">
<ul class="verticalbar ">
<li><a class="aside aaa" href="#home">LATEST HEADLINES</a></li>
<li><a class="aside" href="#home">After Trump’s Snub, Sean Spicer Finally Meets the Pope</a></li>
<li><a class="aside" href="#news">Arsenal Could See Nightmare Exodus on Deadline Day</a></li>
<li><a class="aside" href="#contact">Liverpool Prepares to Hijack £40 Million Chelsea Deal</a></li>
<li><a class="aside" href="#about">How Did Princess Diana Die?</a></li>
<li><a class="aside" href="#about">Newsweek Hosts Second AI and Data Science Event in NYC</a></li>
<li><a class="aside" href="#about">Rival NBA Teams Are Looking to Hijack Cavs-Celtics Deal</a></li>
<li><a class="aside" href="#about">New York Attorney General Helps With Russia Probe</a></li>
</ul>
</div>
<div class="articles">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bella">
<h1 class="trump"> WHY TRUMP MAY STILL WANT AN ECONOMIC WAR WITH BEIJING </h1>
<h3>In the White House, the battle over China is only just beginning </h3>
<hr></hr>
<h2>China Calls U.S. ‘Arrogant’ After Ship Collision </h2>
</div>
<div class="articleone col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="0908palestinians01.jpg" class="subheaderimg">
<h2>The Permanent Occupation?</h2>
LFifty years after Israel seized control of the West Bank, the Palestinians may have finally lost their bid for independence.
</div>
<div class="articletwo col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="b61-model-11-drop.jpg" class="subheaderimg">
<h2>What is EQUIS and why is their accreditation so important to a business school?</h2>
With an estimated number of 15,000 business schools worldwide, only a handful (170 institutions from 41 countries) hold the EQUIS quality label. Find out more...
</div>
</div>
<div class="col-lg-4 col-md-0 col-sm-6 col-xs-4">
<ul class="verticalbar nascosta modifica ">
<li><a class="aside aaa" href="#home">LATEST HEADLINES</a></li>
<li><a class="aside" href="#home">After Trump’s Snub, Sean Spicer Finally Meets the Pope</a></li>
<li><a class="aside" href="#news">Arsenal Could See Nightmare Exodus on Deadline Day</a></li>
<li><a class="aside" href="#contact">Liverpool Prepares to Hijack £40 Million Chelsea Deal</a></li>
<li><a class="aside" href="#about">How Did Princess Diana Die?</a></li>
<li><a class="aside" href="#about">Newsweek Hosts Second AI and Data Science Event in NYC</a></li>
<li><a class="aside" href="#about">Rival NBA Teams Are Looking to Hijack Cavs-Celtics Deal</a></li>
<li><a class="aside" href="#about">New York Attorney General Helps With Russia Probe</a></li>
</ul>
</div>
<div class="articlesdos">
<div class="one col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="hurricane-harvey.jpg" class="subheaderimg">
<h2>The Permanent Occupation?</h2>
LFifty years after Israel seized control of the West Bank, the Palestinians may have finally lost their bid for independence.
</div>
<div class="two col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="princess-diana.jpg" class="subheaderimg">
<h2>What is EQUIS and why is their accreditation so important to a business school?</h2>
With an estimated number of 15,000 business schools worldwide, only a handful (170 institutions from 41 countries) hold the EQUIS quality label. Find out more...
</div>
<div class="three col-lg-4 col-md-4 col-sm-6 col-xs-12 bella">
<img src="rts1a5vt.jpg" class="subheaderimg">
<h2>What is EQUIS and why is their accreditation so important to a business school?</h2>
With an estimated number of 15,000 business schools worldwide, only a handful (170 institutions from 41 countries) hold the EQUIS quality label. Find out more...
</div>
</div>
<!-- <div class="subheader">
<h1> WHY TRUMP MAY STILL WANT AN ECONOMIC WAR WITH BEIJING </h1>
<h3>In the White House, the battle over China is only just beginning </h3>
<hr></hr>
<h2>China Calls U.S. ‘Arrogant’ After Ship Collision </h2>
<div class="primaimg">
<img src="0908palestinians01.jpg" class="subheaderimg uno">
<div class="didascalia1">
<h2 class="clear"> The Permanent Occupation? </h2>
<h3> Fifty years after Israel seized control of the West Bank, the Palestinians may have finally lost their bid for independence. </h3>
</div>
</div>
<img src="0908palestinians02.jpg" class="subheaderimg due">
</div> -->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
html,body {
height: 100%; margin: 0px; padding: 0px; }
#navbar {
margin-bottom:0; }
.alert {
border-radius: 0; }
.container {
width:100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
height:100%;
min-height: 1px;
padding-right: 0;
padding-left: 0; }
.row {
margin-right: 0;
margin-left: 0; }
.footer {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-top: none; }
.panel {
border:none; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #f4f5f6;;
}
.container {
background-color:white;
margin:0 auto;
max-width: 1300px;/*max width + i margini automatici li usi per fare il resize automatico al diminuire la width del broswer*/
margin-right: auto;
margin-left: auto;
} @media screen and (max-width: 1088px) {
.container {
width:100%;}}
.header{
width: 100%;
border-right: 0px;
}
.listfirstnav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: red;
border: 1px solid rgba(0, 0, 0, 0.3);
border-right: 0px;
border-left: 0px;
height: 120px;
z-index: 999;
} @media screen and (max-width: 1088px) {
.listfirstnav {
position: static;
top:200px;}}
li.left{
position: relative;
float: left;
top:40px;
font-weight: bold;
font-size: 18px;
} @media screen and (max-width: 1088px) {
li.left {
top:0px;}}
li.right{
position: relative;
float: right;
top:40px;
font-weight: bold;
font-size: 18px;
}@media screen and (max-width: 1088px) {
li.right {
top:0px;
bottom:300px;}}
.title {
position: absolute;
width: 600px; /* Need a specific value to work */
text-align: center;
margin: 0 auto;
top:10px;
left: 0;
right: 0;
color: white;
font-size: 90px;
font-weight: bold;
display: inline-block;
}@media screen and (max-width: 1088px) {
.title {
top:60px;
}}
.firstnav li a {
display: block;
padding: 12px 16px;
color:white;
text-decoration: none;
}
.firstnav li a.subscribe{
color:red;
background-color: white;
margin-right: 10px;
}
.firstnav li a.edition {
display: inline-block;
padding-left: 0;
margin-left: 10px;
padding-right: 13px;
padding-left: 10px;
}
.listsecondnav {
list-style-type: none;
padding: 0;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.3);
border-right: 0px;
border-left: 0px;
height: 70px;
} @media screen and (max-width: 840px) {
.classic {
display: none;
}}
li.center {
display: inline-block;
border: 1px solid transparent;
border-right-color: black;
position: relative;
top: 25%;
}
li.center:last-child {
border-right-color: transparent;
}
.secondnav li a {
padding: 0 15px;
color:black;
font-size: 24px;
text-decoration: none;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
vertical-align: middle;
}
/*aside navigation bar*/
.verticalbar {
list-style-type: none;
margin: 20px 10px;
padding: 0;
float:left;
height: 540px;
max-width: 80%;
} @media screen and (max-width: 1088px) {
.verticalbar {
display: none;}}
.verticalbar li a {
display: block;
color: #000;
padding: 8px 0;
text-decoration: none;
text-align: left;
}
/* Change the link color on hover */
.verticalbar li a:hover {
background-color: #555;
color: white;
}
a.aside:link, a.aside:visited {
text-transform:none;
}
.verticalbar li a.aaa {
color: grey;
}
.verticalbar li {
border-top: 1px solid #d9d9d9;
font-size: 20px;
padding: 4px;
padding-right: 7px;
margin-right: 20px;
}
.verticalbar li:first-child {
border-top: none;
}
/*imag*/
.imgtop {
width: 100%;
float: left;
padding:20px;
}
/*subheader*/
.trump{
font-size: 30px;
font-weight: bold;
}
h2{
font-weight: bold;
}
.articles {
width: 100%;
float: left;
}
.bella {
padding:20px;
}
.articleone {
clear: left;
}
.articletwo {
}
.subheaderimg{
width: 100%;
}
/*secondlinearticles*/
.articlesdos {
width: 100%;
float: left;
}
/*menu a tendina a comparasa*/
.dropdown:hover .dropdown-content {
display: block; }
.drop-btn:hover {
color: red;
background-color: white;}
.dropdown-content {
display: none;
position: absolute;
top: 32px;
left: 10px;
background-color: #fff;
overflow: visible;
z-index: 999;
}
.dropdown .dropdown-content a { /*ricordati sempre della specificita'. a parte l'ordine dentro del file CSS conta tanto la specificita'. comunque con l'"inspect" capisci subito quali sono le regole piu specifiche e che quindi sovrascrivono le altre*/
display: block;
color: rgba(0, 0, 0, 0.55)
;
font-family: "Ropa Sans", sans-serif;
text-transform: uppercase;
text-align: left;
padding: 5px;
padding-left: 10px;
font-weight: bold;
font-size: 18px;
overflow:visible;
}
.dropdown-content a:hover {
color: #333; }
/*fine menu tendina*/
.nascosta{
display: none; }
@media screen and (max-width: 1088px) {
.nascosta {
display: inline;}}
.firstnav li a.sparisci{
display: inline-block; }
@media screen and (max-width: 1088px) {
.firstnav li a.sparisci {
display: none;}}
.modifica {
max-width: 100%;
}
.modifica li {
padding: 0px;
padding-right: 7px;
margin-right: 20px;
}
.primissimo {
height: 40px;
background-color: black;
text-align: center;
}
.primissimo li a {
color: white;
}
li.prime {
display: inline-block;
position: relative;
top:20%;
}
.dropmod {
left:0;
top:27px;
width: 100%;
}
Upvotes: 1
Views: 1298
Answers (2)
shaochuancs
Reputation: 16226
To prevent <li> items from overlapping in navigation bar, you can use CSS unit vw -- Equal to 1% of the width of the viewport's initial containing block.:
font-size: 2vw; // make font size as 2% of the viewport width
In this way, when the window width is changed, the font size will be changed automatically.
Here is an example, please click "Run code snippet", then click "Full page" and resize browser window to see the effect.
body {
margin: 0;
padding: 0;
}
ul {
background: pink;
padding: 0;
margin: 0;
height: 1.5em;
}
ul li {
display: inline-block;
list-style: none;
font-size: 1.8vw;
margin-right: 1em;
}<ul class="header">
<li>Hello</li>
<li>World</li>
<li>Congratulations</li>
<li>Generation</li>
<li>Carpliforliate</li>
</ul>Upvotes: 1
chngzm
Reputation: 628
I'm not sure if this is what you were intending, but could you could use, in the CSS:
@media screen and (max-device-width: 000px){
div-element{
font-size: 00px;
}
and set different font sizes for different screen sizes. I think you've already used @media-screen in your CSS, so maybe you can change the font sizes inside them
Upvotes: 2
Related Questions
- Overlapping of li element's text when nested
- How do I stop <li> elements from overlapping
- How to separate an <li> element (menu) in a vertical navigation-bar
- Nav not overlapping elements as it should
- Overlapping sub menu ul li's
- <li> element problems in navigation bar
- Keep Navigational Bar from Overlapping Other Elements in CSS
- My navigation list is overlapping padding. How can I prevent this?
- css li overlap the ul menu
- Why is my UL menu overlapping other elements?