Navigation does not float correctly
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"><a href="#">Link 1</a></li>
<li class="two rightside"><a href="#">Link 2</a></li>
<li class="three rightside"><a href="#">Link 3</a></li>
<li class="four rightside"><a href="#">Link 4</a></li>
<li class="five rightside"><a href="#">Link 5</a></li>
<li class="six rightside"><a href="#">Link 6</a></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
html css position
add a comment |
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"><a href="#">Link 1</a></li>
<li class="two rightside"><a href="#">Link 2</a></li>
<li class="three rightside"><a href="#">Link 3</a></li>
<li class="four rightside"><a href="#">Link 4</a></li>
<li class="five rightside"><a href="#">Link 5</a></li>
<li class="six rightside"><a href="#">Link 6</a></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
html css position
add a comment |
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"><a href="#">Link 1</a></li>
<li class="two rightside"><a href="#">Link 2</a></li>
<li class="three rightside"><a href="#">Link 3</a></li>
<li class="four rightside"><a href="#">Link 4</a></li>
<li class="five rightside"><a href="#">Link 5</a></li>
<li class="six rightside"><a href="#">Link 6</a></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
html css position
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"><a href="#">Link 1</a></li>
<li class="two rightside"><a href="#">Link 2</a></li>
<li class="three rightside"><a href="#">Link 3</a></li>
<li class="four rightside"><a href="#">Link 4</a></li>
<li class="five rightside"><a href="#">Link 5</a></li>
<li class="six rightside"><a href="#">Link 6</a></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
html css position
html css position
asked Nov 26 '18 at 2:21
ShaggyMaster333ShaggyMaster333
184
184
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would sayposition absolute and left:50% (minus half width of hr)
something like that.
– Thomas Byy
Nov 26 '18 at 3:22
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
add a comment |
You could set a certain width
to each of the links you floated to the right,that way it wont be compressed
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474004%2fnavigation-does-not-float-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would sayposition absolute and left:50% (minus half width of hr)
something like that.
– Thomas Byy
Nov 26 '18 at 3:22
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
add a comment |
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would sayposition absolute and left:50% (minus half width of hr)
something like that.
– Thomas Byy
Nov 26 '18 at 3:22
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
add a comment |
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
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"><a href="#">Link 1</a></li>
<div class="right_side_container">
<li class="two"><a href="#">Link 2</a></li>
<li class="three"><a href="#">Link 3</a></li>
<li class="four"><a href="#">Link 4</a></li>
<li class="five"><a href="#">Link 5</a></li>
<li class="six"><a href="#">Link 6</a></li>
</div>
</ul>
</div>
edited Nov 26 '18 at 2:40
answered Nov 26 '18 at 2:35
Thomas ByyThomas Byy
1,0641012
1,0641012
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would sayposition absolute and left:50% (minus half width of hr)
something like that.
– Thomas Byy
Nov 26 '18 at 3:22
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
add a comment |
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would sayposition absolute and left:50% (minus half width of hr)
something like that.
– Thomas Byy
Nov 26 '18 at 3:22
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
This is very close to what I want! However, with the hover, I want the line underneath to follow the cursor underneath, which was the purpose of the <hr>. Any ideas of how to do this? (Refer back to the first codepen). Thank you bro
– ShaggyMaster333
Nov 26 '18 at 2:59
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would say
position absolute and left:50% (minus half width of hr)
something like that.– Thomas Byy
Nov 26 '18 at 3:22
I think that would involve javascript and tracking the mouse position and applying a position to the hr element based on the mouse. So if the width of the header was 400px and the mouse was found at 200px you would say
position absolute and left:50% (minus half width of hr)
something like that.– Thomas Byy
Nov 26 '18 at 3:22
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
Can you assign this as correct if it has helped you fix the issue. Thanks
– Thomas Byy
Nov 26 '18 at 23:37
add a comment |
You could set a certain width
to each of the links you floated to the right,that way it wont be compressed
add a comment |
You could set a certain width
to each of the links you floated to the right,that way it wont be compressed
add a comment |
You could set a certain width
to each of the links you floated to the right,that way it wont be compressed
You could set a certain width
to each of the links you floated to the right,that way it wont be compressed
answered Nov 26 '18 at 2:41
WolfiebaeWolfiebae
2712
2712
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474004%2fnavigation-does-not-float-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown