I have a responsive drop down menu that will center on its smallest size when the width is 100% but wont when its changed to a max width of 100%. I have its parent and its parent's parent's ect set to a max-width of 100% but the max-width property doesn't seem to work like its supposed to.
From my understanding max-width is relative to the parent so if its parent and its parent's parents are set to a max width of 100%, the smallest child that is set to a width of max-width should have same width as the highest parent, which is max width of 100%.
Is there something wrong with my code or am I understanding something wrong? I know I can just solve the problem with width of 100% but I want to understand why the max-width isnt workng
nav {
color: white;
background-color: orange;
margin: auto;
padding: 0;
max-width: 100%;
}
nav li > span, nav a {
font-size: 1.3em;
}
nav ul {
padding: 0;
text-align: center;
max-width: 100%;
margin: auto;
}
nav li {
border-style: solid;
border-width: 0 1px 0 0;
border-color: rgba(0,0,0,.1);
list-style: none;
max-width: 100%;
}
.main-nav {
position: relative;
}
.sub-nav {
box-shadow: 5px 5px 10px rgba(0,0,0,.1);
z-index: 1;
position: absolute;
display: none;
background-color: white;
max-width: 100%;
}
.sub-nav li {
max-width: 100%;
}
.sub-nav li a {
max-width: 100%;
}
.main-nav:hover .sub-nav {
display: block;
}
#media screen and (min-width: 450px){
nav li {
display: inline-block;
margin: 3px;
padding: 2px;
}
nav ul {
text-align: right;
padding: 0 5% 0 0;
}
.main-title {
text-align: left;
margin: 0 0 15px 15%;
padding: 15px 0 0 0;
color: orange;
font-size: 4em;
}
}
<header>
<h1 class="main-title">This Is a Test</h1>
<nav>
<ul>
<li class="main-nav home-page active">
HOME</li>
<li class="main-nav">
<span> Content 1 </span>
<ul class="sub-nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li class="main-nav">
<span> Content 2 </span>
<ul class="sub-nav">
<li>Page 4</li>
<li>Page 5</li>
<li>Page 6</li>
</ul>
</li>
<li class="main-nav">
<span> Content 3 </span>
<ul class="sub-nav">
<li>Page 7</li>
<li>Page 8</li>
<li>Page 9</li>
</ul>
</li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
</footer>
Demo
I'm not really sure what max-width has to do with it, but simply removing the text alignment results in a centered menu.
#media screen and (min-width: 450px) {
...
nav ul {
/* text-align: right; */
...
}
Demo
Here I've removed every instance of max-width, and nothing seems to change.
Related
I am experimenting with a navigation bar, and I am unsure of how to float part of the list to the right, without the text becoming laterally inverted. I want the first link to be on the very left side, whilst all the rest of the links are on the right side. Also, using float: right makes the list items very compressed, and I was wondering on how to get past this? I have chosen to do it this way so that I could use a line when hovering over the links. https://codepen.io/anon/pen/xQjozy
html:
<div class="navigationbar">
<ul>
<li class="one">Link 1</li>
<li class="two rightside">Link 2</li>
<li class="three rightside">Link 3</li>
<li class="four rightside">Link 4</li>
<li class="five rightside">Link 5</li>
<li class="six rightside">Link 6</li>
<hr />
</ul>
</div>
css:
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 16%;
padding: .15rem 0;
margin: 0;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
}
.two:hover ~ hr {
margin-left: 16%;
}
.three:hover ~ hr {
margin-left: 32%;
}
.four:hover ~ hr {
margin-left: 48%;
}
.five:hover ~ hr {
margin-left: 64%;
}
.six:hover ~ hr {
margin-left: 80%;
}
hr {
height: .25rem;
width: 16%;
margin: 0;
background: blue;
border: none;
transition: .3s ease-in-out;
}
.navigationbar{
background-color: green;
overflow: hidden;
}
ul{
margin:0.7vh 0vh 0.7vh 0vh;
}
/*
.rightside{
float:right
}*/
Thanks
I think this is closer to what you want I hope.
Also using border bottom is much better way to handle a link underline. It will always line itself up under the content perfectly. I would also suggest changing the font size from vw to px or em and use media queries to change the font as the browser width gets smaller/larger.
EDIT: This is how I would correct your code but I don't think this is the correct way to accomplish this.
ul li {
display: inline;
text-align: center;
border-bottom:3px solid transparent;
}
a {
display: inline-block;
padding: .15rem 0;
margin: 0;
text-decoration: none;
color: #fff;
font-size: 1.5vw;
padding:6px 15px; /*add more spacing to links*/
}
li:hover {
border-bottom:3px solid blue;
}
.navigationbar{
background-color: green;
overflow: hidden;
}
ul{
margin:0.7vh 0vh 0.7vh 0vh;
}
.leftside {
float:left;
}
.right_side_container{
float:right
}
<div class="navigationbar">
<ul>
<li class="one leftside">Link 1</li>
<div class="right_side_container">
<li class="two">Link 2</li>
<li class="three">Link 3</li>
<li class="four">Link 4</li>
<li class="five">Link 5</li>
<li class="six">Link 6</li>
</div>
</ul>
</div>
You could set a certain width to each of the links you floated to the right,that way it wont be compressed
I'm a beginner in CSS but I'm currently trying to create a material-design header with "line" under each tab like on this Google site : Our Products | Google
If possible I'd also like the animation when changing tab.
For now my header html is :
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
</nav>
</header>
And my CSS :
header {
display: table;
background:#FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
width:100vw;
clear: both;
display: table;
overflow: hidden;
white-space: nowrap;
}
nav {
display: inline-block;
margin-left: 5vw;
vertical-align: middle;
}
nav ul {
display: inline-block;
margin 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 3vw;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: inherit;
}
nav a:hover,:active,:focus {
color: #b82525;
}
How do I position the shape to be under the .current-nav tab ?
If you inspect the example you have linked to, you will see that one way they do this is by adding a border-bottom to the selected element. You can do this like so
.current-nav {
border-bottom:1px solid #4285f4;
}
They have another technique which is to add an element below, but i'll leave that for you to investigate/reverse engineer.
just use nav ul li a.current-nav{ border-bottom: 1px solid red; } and you are done.
Try this:
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div class="line-selected right" style="display: block; left: 322px; right: 0.078px;"></div>
</nav>
</header>
The left and right values depends on the sizes of your Logo and of your <li>. You have to change the style of the "line-selected right"class for each event.
Im learning html & css and after few tutorials I decided to write webpage from nothing.
But I've got a problem. When I add "display: inline" in CSS .nav, it ignores all .nav css properties, including "display: inline".
Here's code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Neni okurka, nebudou caciky</title>
</head>
<body>
<div class="nav">
<ul>
<li class="active">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</div>
<div class="nav2">
<ul>
<li class="active">Navi 1</li>
<li>Navi 2</li>
<li>Navi 3</li>
<li>Navi 4</li>
<li>Navi 5</li>
</ul>
</div>
</body>
</html>
CSS
body {
background-image: url("background.png");
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav {
display: inline;
width: 500px;
background: #fff;
}
If you want background(image) you need to have it in the container as soon you give it width and height because body is the "Base" you can give it margin: 0; padding: 0; to reset it only and you can add background to it but not height and width. Inside containeryou have created you can play with the height and width as you like.
html,
body {
margin: 0;
padding: 0;
background-color: cadetblue;
}
.container {
width: 1050px;
height: 100vh;
margin: 0 auto;
position: relative;
background-size: 100% 100%;
background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center;
}
.nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background: beige;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav ul li {
margin-left: 12px;
}
.nav ul li a {
float: left;
font-size: 16px;
font-weight: lighter;
text-decoration: none;
font-family: sans-serif;
margin: 10px 0px 10px 0px;
padding: 8px 15px 8px 15px;
}
.nav ul li a:hover {
color: #fff;
border-radius: 3px;
background: cadetblue;
}
<div class="container">
<div class="wrapper">
<div class="nav">
<ul>
<li class="active">Navigation 1
</li>
<li>Navigation 2
</li>
<li>Navigation 3
</li>
<li>Navigation 4
</li>
<li>Navigation 5
</li>
</ul>
<ul>
<li class="active">Navi 1
</li>
<li>Navi 2
</li>
<li>Navi 3
</li>
<li>Navi 4
</li>
<li>Navi 5
</li>
</ul>
</div>
</div>
</div>
this code without display:inline; or display :inline-block; which
it works but it's another way to align nabbar in nice way compatible
with all browsers too.
I hope you like it and it helps you, let me know if you have another question.
The right usage is:
.nav li {
display: inline;
}
You should put display: inline-block;
Man try to put .nav ul lit to refer to the li but I will not use that let me tell you now one sec
.nav ul li`display:inline`
in orther to display betther ur nav thing u shuld not use .nav ul li display:inline
i know i say that was for answer ur question but this thing i will tell you will be betther
.nav ul lifloat:left
this will do the items in the li will float left and will do the same as the inline but isbetther to use that rather than the inline
I am trying to create a vertical navigation in my HTML document, but I cannot seem to get the main menu to line up evenly. Here is my HTML for the vertical navigation:
<div id="navbar">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul></li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Menu 5</li>
</ul>
</div>
And my CSS:
#navbar {
margin-left: -40px;
}
#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}
#navbar ul li:hover ul{
visibility:visible;
}
This is my first post ever, so I apologize if I didn't post in the correct format. This code is also from a much larger HTML/CSS file, so I just copy/pasted the only part I'm having an issue with. If I need to post a screenshot of what I'm talking about I can do that.
Thank you in advance!!
demo - http://jsfiddle.net/uab2hr50/2/
if you are looking to align the sub menu below the main menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#navbar ul {
border: 1px solid red;
display: inline-block;
padding: 6px;
}
#navbar li {
list-style: none;
position: relative;
width: 209px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul {
display: none;
padding: 0;
border: 0;
}
#navbar ul li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
<li>Drop 3
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
</ul>
</li>
<li>Menu 5
</li>
</ul>
</div>
There are a few problems here preventing the display you expect:
First: the fiddle
CSS CHANGES
#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
display: block;
}
#navbar li:after {
content: '';
display: table;
clear: both;
}
#navbar ul a {
display: inline-block;
}
#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
padding: 0;
display: inline-block;
vertical-align: top;
margin-bottom: -9000px;
}
#navbar ul ul li:first-child {
padding-top: 0;
}
We removed quite a bit of your padding and margin rules here, and stopped setting a width on the li that you went ahead and broke out of anyway in the original code.
Then, we told both the a and ul elements to display as inline-block, told them they were to vertically align at the top and removed the padding-top off the first child of your sub-nav.
Then, we way over-compensate for the height of your lists by setting a margin-bottom of -9000px to pull your subsequent list items up to where they belong.
No absolute positioning needed, which would probably require some JavaScript to position everything reliably for you given different conditions.
Hope that helps.
I'm working on a nav bar style. I want the border to expand to 100% width of the area the menu is taking up, but I want the elements in the rows to float to the right of this 100% width area. Unfortunately, if I get everything floated to the right then it doesn't expand to full width.
Here's an image to check out: http://i.imgur.com/EKd3cZY.png
You can see what width it should be and what width things actually are.
Here's my HTML:
<section class="row">
<nav class="top-bar-navigation">
<div class="main-menu-holder">
<ul class="main-menu">
<li><a class="active" href="#">Active</a></li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
<button>CTA BUTTON</button>
</div>
<ul class="secondary-menu">
<li>Support</li>
<li>Docs</li>
<li>Why</li>
<li>Social</li>
<li>Link</li>
</ul>
</nav>
</section>
Here's the SASS I've created for the nav element. There are some other styles for the default elements like typography but I don't think it's relevant to this issue:
.top-bar-navigation {
width: 100%;
clear: both;
.main-menu-holder {
border-bottom: 2px solid $pale-grey;
overflow: hidden;
}
.main-menu-holder,
.secondary-menu {
float: right;
}
span,
button,
.main-menu {
display: inline-block;
}
li {
display: inline-block;
}
a {
color: black;
font-weight: 300;
}
a.active {
font-weight: 700;
}
}
Here is the Row style:
.row {
width: 90%;
margin: auto;
max-width: 1100px;
margin-bottom: 5px;
}
.row:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Have you tried using a <hr /> or creating a new div with a class on it to style it to create the same effect?