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?
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
I have 3 list items with display: block. I want the even element to be positioned a little lower but when I try with margin-top all my elements are lower positioned.
.hero__description-right {
margin-left: 0px;
width: 100%;
height: auto;
margin-bottom: 20px;
}
.description__item {
margin-top: 0px;
display: inline-block;
position: relative;
clear: both;
}
.description__item:last-child {
margin-bottom: 0px;
}
.description__item:nth-child(2n) {
margin-left: 0px;
margin-top: 20px;
}
<div class="hero__description-right">
<li class="description__item">
<h2><span class="hashtag">#</span> Text</h2>
</li>
<li class="description__item test">
<h2><span class="hashtag">#</span> Text</h2>
</li>
<li class="description__item">
<h2><span class="hashtag">#</span> Text</h2>
</li>
</div>
How can I position only the even elements? Thanks in advance !
It seems you only want to visually move the even elements - in that case it'd be better to use transform: translate instead of margins (this is because margin affects other elements in the document flow, whereas transform is only visually moving them), for example:
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
li:nth-child(even) {
transform: translateY(5px);
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
When put in a proper snippet, it mostly works - if I understand your question. The biggest issue seems to be that, li elements do not belong inside a div - they need to be inside a ul or ol element.
.hero__description-right {
margin-left: 0px;
width: 100%;
height: auto;
margin-bottom: 20px;
}
.description__item {
margin-top: 0px
display: inline-block;
position: relative;
clear: both;
}
.description__item:last-child {
margin-bottom: 0px;
}
.description__item:nth-child(2n) {
margin-left: 0px;
margin-top: 200px;
}
<ul class="hero__description-right">
<li class="description__item">
<h2><span class="hashtag">#</span> Text</h2>
</li>
<li class="description__item test">
<h2><span class="hashtag">#</span> Text</h2>
</li>
<li class="description__item">
<h2><span class="hashtag">#</span> Text</h2>
</li>
</ul>
I have a hoverable menu as you can see in the code. However, I got a problem when I hover, which the hover content goes out of the page. When I use "position: relative" for the div(content) it is okay but then the text "Example" goes to the left, wonder how to fix.
When I use position: absolute:
When I use position: relative:
ul {
float: right;
position: relative;
}
div {
display: none;
background-color: red;
position: relative;
width: 200px;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
due to lack of space u'r getting this issue make width:200px; for ul
ul {
float: right;
position: relative;
width: 200px;
}
div {
display: none;
background-color: red;
position: relative;
width: 200px;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
You could use position absolute, and manipulate its positions setting a negative margin...
ul {
float: right;
position: relative;
}
div {
display: none;
background-color: red;
position: absolute;
width: auto;
margin-left: -26px;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
Erase the div, apply the width to the ul and apply the display: none and hovering to the ol.
ul {
float: right;
width: 200px;
}
ol {
display: none;
background-color: red;
}
ul:hover ol {
display: block;
}
<ul>
<li>Example</li>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</ul>
Second version: If you want everything to be floated right, apply float: right; to ul and li in the HTML structure as used before:
ul {
float: right;
}
ol {
display: none;
background-color: red;
}
li {
float: right;
clear: right;
}
ul:hover ol {
display: block;
}
<ul>
<li>Example</li>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</ul>
It's natural behavior, it will depend on header text lenght, it will set your max lenght for below text, you'll need to define a fixed width for the header element and not on child one as you did.
Example of dynamic width (natural div property as a flex container):
ul {
float: right;
position: relative;
}
div {
display: none;
background-color: red;
position: relative;
}
ul:hover div {
display: block;
}
<ul>
<li>ExampleOfMagicMenu</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
Second example, setting fixed width to the parent box, letting child/s element/s with auto-width (they will never occupy more width than parent, as they can grow in height, overriding height auto with a fixed one will cause overflow):
ul {
float: right;
position: relative;
width: 100px;
text-align: right;
list-style: none;
}
div {
display: none;
background-color: red;
position: relative;
}
ul:hover div {
display: block;
}
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
You can do it with the Flexbox without unnecessary floats and positioning.
Solution with the container as you wrote in the comment:
.container {
max-width: 960px;
margin: 0 auto;
border: 1px solid;
}
ul {
display: flex; /* displays children inline by default that's why you need to change its direction */
flex-direction: column; /* stacks children vertically */
align-items: flex-end; /* places them far right */
}
ul > div { /* modified for accuracy */
display: none;
background-color: red;
width: 200px;
}
ul li:hover + div { /* modified for accuracy since the inner div is the next element after the li */
display: block;
}
li + div:hover {display:block} /* needs to be in order to be displayed when hovering over */
<div class="container">
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
</div>
If you don't fancy the above solution then you can simply add right: 0 to the absolutely positioned div:
.container {
max-width: 960px;
margin: 0 auto;
border: 1px solid;
}
.container:after {
content: "";
display: block;
clear: both;
}
ul {
float: right;
position: relative;
}
ul > div {
display: none;
background-color: red;
position: absolute;
right: 0; /* added */
width: 200px;
}
ul:hover div {
display: block;
}
<div class="container">
<ul>
<li>Example</li>
<div>
<ol>
<li>Link 1</li>
<li>Link 2</li>
</ol>
</div>
</ul>
</div>
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.
I have menu like this: jsfiddle. If in your browser start zoomin (Firefox ctrl+roller on mouse) elements will be enlarging. But not disproportionately. In some steps of zoom last menu element (my text 3) jumps to another row...
How ensure some scale ratio? (Without javascript)
EDIT:
Now I see in chrome with 100% zoom element (my text 3) is on another row but problem is still the same but reversed - if you will zooming element (my text 3) jumps back to row 1...
HTMl:
<ul>
<li>my text 1</li>
<li>my text 2</li>
<li>my text 3</li>
</ul>
CSS:
ul {
display: inline-block;
background-color: blue;
width: 298px;
padding: 0;
}
ul li {
display: block;
float: left;
margin-right: 20px;
}
ul li a {
display: inline-block;
background-color: red;
padding: 10px;
}
This is not a browser zoom feature issue.
You have limited the space in which your floated <li> can be contained. On my browser the text of each <li> takes up approximately 80px. Each <li> is approximately 100px because you added margin to the right side of each one. So, 100px * 3 = 300px and your container is only 298px.
There are multiple solutions to this problem like flexbox, inline-block, etc. but the easiest for you might be to remove the margin from the last <li>.
ul {
display: inline-block;
background-color: blue;
width: 298px;
padding: 0;
}
ul li {
display: block;
float: left;
margin-right: 20px;
}
ul li:last-child {
margin: 0;
}
ul li a {
display: inline-block;
background-color: red;
padding: 10px;
}
<ul>
<li>my text 1</li>
<li>my text 2</li>
<li>my text 3</li>
</ul>
But then you end up with extra background blue. To fix this don't set a set width on the <ul> and clear the floated elements within the <ul> so you can still see the background blue.
ul {
display: inline-block;
background-color: blue;
padding: 0;
overflow: hidden; /* clearfix: clears floats */
}
ul li {
display: block;
float: left;
margin-right: 20px;
}
ul li:last-child {
margin: 0;
}
ul li a {
display: inline-block;
background-color: red;
padding: 10px;
}
<ul>
<li>my text 1</li>
<li>my text 2</li>
<li>my text 3</li>
</ul>
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.