I am trying to have two items as links in the top right corner of the page.
I posted my code on codepen for a visual example. Whenever I add padding for the visit button the about goes up on the page.
CSS:
.navigation {
display: flex;
justify-content: space-between;
align-content: center;
&-list {
display: flex;
align-self: center;
list-style: none;
font-size: 2rem;
}
&-item {
&-visit {
background-color: $color-tertiary;
padding: 2rem;
}
}
}
Html:
<div class="container">
<navigation class="navigation">
<h1 class="porto">Porto</h1>
<ul class="navigation-list">
<li class="navigation-item">About</li>
<li class="navigation-item navigation-item-visit">Visit</li>
</ul>
</navigation>
</div>
Try removing the height in &-item and padding-bottom in &-visit.
Related
I am trying to move #nav-bar elements to the right but it's not working. I want to put .logo to the left using flex-start but I don't think that's working. I think it's on the left by default.
I am new to css and html.
I tried making it into a flex box and using flex-end. I dont want to use inline or blocking. From what I understand, making display to flex and using flex-end will put the item to the right in a set row flex-direction .
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
background-color:#b6eaf1;
font-family:Cambria, sans-serif;
}
header{
display:flex;
top:0;
width:100%;
border:5px solid blue;
}
.logo img{
width:17vw;
display:flex;
justify-content:flex-start;
align-items:center;
}
img{
height:100%;
width:100%;
}
#nav-bar{
display:flex;
}
#nav-bar ul{
list-style:none;
display:flex;
flex-direction:row;
justify-content:flex-end;
height:100%;
gap:4vw;
letter-spacing:2.5px;
}
#nav-bar li{
list-style:none;
}
#nav-bar a{
text-decoration:none;
color: blue;
}
<header id="header">
<div class="logo">
<img id="img-header" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.zjBOOZwVgo-4VI476pnY1QHaFk%26pid%3DApi&f=1&ipt=55595a40798b691f4deffe4af60285dc33326fe0932e67b4acb29ea273dcffaa&ipo=images" alt="pikachu face logo">
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#About_us">About us</a></li>
<li><a class="nav-link" href="Services">Services</a></li>
<li><a class="nav-link" href="#Contact_us">Contact us</a></li>
</ul>
</nav>
</header>
So what's happening is that the navbar is not getting the complete width to align the nav-bar elements to the right. Well if you give the width:100% and add the justify-content: right to your #nav-bar it should fix the alignment. Please refer the complete code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #b6eaf1;
font-family: Cambria, sans-serif;
}
header {
display: flex;
top: 0;
width: 100%;
border: 5px solid blue;
}
.logo img {
width: 17vw;
display: flex;
justify-content: flex-start;
align-items: center;
}
img {
height: 100%;
width: 100%;
}
#nav-bar {
display: flex;
justify-content: right;
width: 100%;
}
#nav-bar ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-end;
height: 100%;
gap: 4vw;
letter-spacing: 2.5px;
}
#nav-bar li {
list-style: none;
}
#nav-bar a {
text-decoration: none;
color: blue;
}
<header id="header">
<div class="logo">
<img id="img-header" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.zjBOOZwVgo-4VI476pnY1QHaFk%26pid%3DApi&f=1&ipt=55595a40798b691f4deffe4af60285dc33326fe0932e67b4acb29ea273dcffaa&ipo=images" alt="pikachu face logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#About_us">About us</a>
</li>
<li><a class="nav-link" href="Services">Services</a></li>
<li><a class="nav-link" href="#Contact_us">Contact us</a></li>
</ul>
</nav>
</header>
Below is a drop-down list nested in a drop-down list. the first code snippet works just fine; as I hover over the parent of the first drop-down list it's height transitions and it displays as I intended, as with the subsequent nested drop-down list.
The problem is with the second snippet...
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
/*
ul li li:hover {
transform: scale(1.1);
}
*/
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Here I make one change at the very bottom of the CSS as I wanted the hover effect to be just a bit more pronounced. I apply a transform scale effect to the dropdown list's li's.
The first drop-down list works just fine, but then the second drop-down list does not.
Can someone please explain what is happening?
* {
margin: 0;
padding: 0;
}
body {
background-color: hsla(33,25%,75%,1);
box-sizing: border-box;
}
.flex-container {
width: 100%;
}
.flex-container a {
background: lightskyblue;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 25px;
padding: 10px;
text-decoration: none;
transition: background-color 500ms, height 500ms, color 500ms;
}
.flex-container a:hover {
background: cornflowerblue;
color: snow;
}
.flex-container li:hover {
box-shadow: 10px 10px 10px black;
}
.flex-container ul {
list-style: none;
display: flex;
}
.flex-container > ul > li {
width: 100%;
position: relative;
}
ul li ul {
flex-direction: column;
position: absolute;
width: 100%;
left: 50%;
}
ul li li {
width: 100%;
top: 0;
height: 0;
overflow: hidden;
transition-duration: 500ms;
}
li:hover > ul > li {
height: 45px;
}
ul li li:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Page 2</title>
<meta charser="utf-8">
<link rel="stylesheet" href="styles/styles2.css">
</head>
<body>
<div class="flex-container">
<ul>
<li>
Home
<ul>
<li>
Two
</li>
<li>
Two
</li>
<li>
Two
<ul>
<li>
two
</li>
<li>
two
</li>
</ul>
</li>
</ul>
</li>
<li>
Home
</li>
<li>
Home
</li>
<li>
Home
</li>
</ul>
</div>
</body>
</html>
Fixed.
I don't understand why the problem occurred in the first place, nor do i understand why the fix I found works but it does.
I simply made the overflow property 'visible' in the (ul li li:hover ) and it works.
Most drop down lists in websites' main menus are powered by Javascript, which usually displays some div element containing the list on click or hover. But non Javascript users just can't see the drop down list!
The only alternative I can think of is to display the drop down list as a HTML select element, but nobody does that. Is there a better solution out there?
Non-JavaScript menus are surprisingly common and are often times just as clean and can be more efficient than their JavaScript counterparts. You can use JavaScript but it's important to have graceful degradation if you want your menu to be accessible and functional for all users.
There are many examples of these online but the basic premise is to have a normal navigation menu (using UL and LI elements), and use CSS to change the look and appearance based on the user interaction (such as a hover).
Here is an example of a basic menu that will work without CSS or JavaScript and still be perfectly usable (some of the code taken from this answer: https://stackoverflow.com/a/12279190/937012)
<div class="wrapper">
<navigation role="navigation" class="primary-nav">
<ul role="menubar">
<li role="presentation">
<a role="menu-item" href="#" title="First Link">First Link</a>
</li>
<li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
<ul role="menu">
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menu-item" href="#" title="Third Link">Third Link</a>
</li>
</ul>
</navigation>
</div>
As is, this will create a navigation menu (using some accessibility attributes) that is cross-browser and accessible. You can read more about accessibility best practices here: https://www.webaccessibility.com/best_practices.php
You can then apply whichever CSS you like to change the appearance and give the desired "drop-down" effect.
Here is some CSS for the above markup that produces a horizontal menu that features a sub-menu that appears below the second link when the mouse is moved over the second list item.
A {
text-decoration: none;
}
A:HOVER {
color: blue;
}
.wrapper {
width: 90%;
display: block;
}
.primary-nav {
display: block;
margin: 0px auto;
width: 100%;
padding: 0px;
}
.primary-nav UL {
background-color: #ababcd;
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-indent: 0px;
}
.primary-nav > UL {
display: inline;
border: solid 1px #000000;
text-indent: 0px;
float: left;
height: 24px;
margin: 0px;
width: 100%;
list-style-type: none;
border-collapse: collapse;
}
.primary-nav LI {
max-width: 150px;
text-align: center;
}
.primary-nav > UL LI {
display: inline;
float: left;
padding: 0px 3px 0px 3px;
width: 32%;
line-height: 24px;
vertical-align: top;
margin-top: 0px;
text-align: center;
}
.primary-nav > UL LI UL {
display: none;
width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
display: inline-block;
float: left;
margin-left: 0px;
clear: both;
border: inset 1px #898989;
box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
margin-top: 2px;
text-align: left;
clear: both;
width: 100%;
padding: 0px;
}
.primary-nav LI A:HOVER {
background-color: #cdcdef;
}
.primary-nav LI A {
display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
padding: 1px 3px;
margin: 0px 3px;
}
Here is a fiddle that stitches it all together: http://jsfiddle.net/xDaevax/osu7t9ty/
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/
How can I make twitter bootstrap's menu dropdown be on hover instead of a click?
1.Hide dropdown-menu on mouseover.
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
});
2.Hide dropdown-menu on click.
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
});
});
http://jsfiddle.net/7yMsQ/1/
heres a function I'm using to get the navbar dropdowns to slide down on hover instead of just popping in
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
While How to make twitter bootstrap menu dropdown on hover rather than click has been upvoted a lot, with the newer versions of Bootstrap, no need to hack at it.
http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/ is a replacement for the existing dropdown.js, and lets you enable on hover. No CSS modifications required.
You can simply do this by using only css. In case of button dropdown.
<div class="btn-group btn-hover-group">
Action 1
<ul class="dropdown-menu pull-right">
<li>Action 2</li>
<li>Action 3</li>
</ul>
</div>
Removed data-toggle="dropdown" from
.btn-hover-group > a:hover ~ ul{
display:block;
}
.btn-hover-group > .dropdown-menu:hover{
display:block;
}
I hope this will suffice your purpose.
You could use a bootstrap 4 like this..
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
then define the class property value following..it should work
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {display: block;}