Making menu vertically centred with logo image

Making menu vertically centred with logo image - html

I'm stuck trying to align the logo in the same height with my menu.
Here the html code:
/*
====================== MAIN ======================
*/
.main-menu {
background-color: #ffffff;
padding: 16px 5px;
margin: 0;
display: inline-block;
position: relative;
width: 100%;
}
.main-menu:before,
.main-menu ul,
.main-menu li,
.main-menu a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
border: 0;
list-style: none;
}
.main-menu a {
cursor: pointer;
}
.main-menu,
.main-menu a,
.main-menu a:visited {
color: #555555;
}
.main-menu > li {
display: inline-block;
vertical-align: middle;
float: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main-menu > li > a {
font-weight: bold;
padding: 0 10px;
line-height: 39px;
}
.main-menu > li:hover {
background-color: #8B008B;
}
.main-menu > li:hover > a,
.main-menu > li:hover > a:visited {
color: #ffffff;
}
.main-menu li {
position: relative;
cursor: default;
}
.main-menu li > a {
text-decoration: none;
display: block;
}
.main-menu li > ul{
z-index: 1;
}
.main-menu .fa {
font-size: 12pt;
letter-spacing: 8px;
line-height: inherit;
}
.main-menu:after {
content: '';
display: block;
clear: both;
}
/*
====================== LOGO ======================
*/
.main-menu > li.mm-logo {
float: left;
margin-left: 0;
font-size: 0;
display: inline-block;
vertical-align: middle;
}
.main-menu > li.mm-logo a {
padding: 0;
line-height: 0;
}
.main-menu > li.mm-logo img {
border: none;
display: block;
padding:0px;
height: 118px;
width: 118px;
}
.main-menu > li.mm-logo:hover {
background: none;
}
/*
====================== RESPONSIVE ======================
*/
#media screen and (max-width: 768px) {
/* ====================== MAIN ====================== */
.main-menu[class*='mm-response'] > li {
position: relative;
}
.main-menu[class*='mm-response'] > li > ul{
left: 0;
right: 0;
width: auto !important;
margin-right: 0;
}
.main-menu[class*='mm-response'] > li > ul ul {
top: 100%;
margin-left: 39px !important;
}
/* ====================== SWITCH ====================== */
.main-menu.mm-response-switch > li {
display: none;
float: none;
position: relative;
width: 100%;
}
.main-menu.mm-response-switch > li + li {
margin-left: 0;
margin-top: 10px;
}
.main-menu.mm-response-switch > li.mm-logo {
display: block;
}
.main-menu.mm-response-switch > li.mm-logo img {
position: relative;
z-index: 1;
}
.main-menu.mm-response-switch:before {
font-family: FontAwesome;
content: '\f0c9';
position: relative;
float: right;
cursor: pointer;
line-height: 39px;
height: 39px;
padding: 0 14px;
z-index: 2;
}
.main-menu.mm-response-switch:hover:before {
opacity: 0;
}
.main-menu.mm-response-switch:hover > li {
display: block;
}
/* ====================== RESPONSE MARGIN ====================== */
.main-menu.mm-response-margin > li > ul {
margin-left: 39px !important;
}
}
<nav>
<ul onClick="" class="main-menu mm-response-switch">
<li class="mm-logo">
<img src="logo.png" alt="Accueil">
</li>
<li>
<i class="fa fa-indent"></i>Lien 1
</li>
<li>
<i class="fa fa-indent"></i>Lien 2
</li>
<li>
<i class="fa fa-indent"></i>Lien 2
</li>
</ul>
</nav>
Don't give more importance to the responsive section, just guide me how to make all elements in the same line vertically.

Remove the floats from the li elements and they will align vertically since the li's are inline-block and you have already assigned vertical-align: middle
/*
====================== MAIN ======================
*/
.main-menu {
background-color: #ffffff;
padding: 16px 5px;
margin: 0;
display: inline-block;
position: relative;
width: 100%;
}
.main-menu:before,
.main-menu ul,
.main-menu li,
.main-menu a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
border: 0;
list-style: none;
}
.main-menu a {
cursor: pointer;
}
.main-menu,
.main-menu a,
.main-menu a:visited {
color: #555555;
}
.main-menu > li {
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main-menu > li > a {
font-weight: bold;
padding: 0 10px;
line-height: 39px;
}
.main-menu > li:hover {
background-color: #8B008B;
}
.main-menu > li:hover > a,
.main-menu > li:hover > a:visited {
color: #ffffff;
}
.main-menu li {
position: relative;
cursor: default;
}
.main-menu li > a {
text-decoration: none;
display: block;
}
.main-menu li > ul{
z-index: 1;
}
.main-menu .fa {
font-size: 12pt;
letter-spacing: 8px;
line-height: inherit;
}
.main-menu:after {
content: '';
display: block;
clear: both;
}
/*
====================== LOGO ======================
*/
.main-menu > li.mm-logo {
margin-left: 0;
font-size: 0;
display: inline-block;
vertical-align: middle;
}
.main-menu > li.mm-logo a {
padding: 0;
line-height: 0;
}
.main-menu > li.mm-logo img {
border: none;
display: block;
padding:0px;
height: 118px;
width: 118px;
}
.main-menu > li.mm-logo:hover {
background: none;
}
/*
====================== RESPONSIVE ======================
*/
#media screen and (max-width: 768px) {
/* ====================== MAIN ====================== */
.main-menu[class*='mm-response'] > li {
position: relative;
}
.main-menu[class*='mm-response'] > li > ul{
left: 0;
right: 0;
width: auto !important;
margin-right: 0;
}
.main-menu[class*='mm-response'] > li > ul ul {
top: 100%;
margin-left: 39px !important;
}
/* ====================== SWITCH ====================== */
.main-menu.mm-response-switch > li {
display: none;
float: none;
position: relative;
width: 100%;
}
.main-menu.mm-response-switch > li + li {
margin-left: 0;
margin-top: 10px;
}
.main-menu.mm-response-switch > li.mm-logo {
display: block;
}
.main-menu.mm-response-switch > li.mm-logo img {
position: relative;
z-index: 1;
}
.main-menu.mm-response-switch:before {
font-family: FontAwesome;
content: '\f0c9';
position: relative;
float: right;
cursor: pointer;
line-height: 39px;
height: 39px;
padding: 0 14px;
z-index: 2;
}
.main-menu.mm-response-switch:hover:before {
opacity: 0;
}
.main-menu.mm-response-switch:hover > li {
display: block;
}
/* ====================== RESPONSE MARGIN ====================== */
.main-menu.mm-response-margin > li > ul {
margin-left: 39px !important;
}
}
<nav>
<ul onClick="" class="main-menu mm-response-switch">
<li class="mm-logo">
<img src="logo.png" alt="Accueil">
</li>
<li>
<i class="fa fa-indent"></i>Lien 1
</li>
<li>
<i class="fa fa-indent"></i>Lien 2
</li>
<li>
<i class="fa fa-indent"></i>Lien 2
</li>
</ul>
</nav>
You can also use flexbox and assign display: flex; align-items: center; to the parent ul
/*
====================== MAIN ======================
*/
.main-menu {
background-color: #ffffff;
padding: 16px 5px;
margin: 0;
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.main-menu:before,
.main-menu ul,
.main-menu li,
.main-menu a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
border: 0;
list-style: none;
}
.main-menu a {
cursor: pointer;
}
.main-menu,
.main-menu a,
.main-menu a:visited {
color: #555555;
}
.main-menu > li {
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main-menu > li > a {
font-weight: bold;
padding: 0 10px;
line-height: 39px;
}
.main-menu > li:hover {
background-color: #8B008B;
}
.main-menu > li:hover > a,
.main-menu > li:hover > a:visited {
color: #ffffff;
}
.main-menu li {
position: relative;
cursor: default;
}
.main-menu li > a {
text-decoration: none;
display: block;
}
.main-menu li > ul{
z-index: 1;
}
.main-menu .fa {
font-size: 12pt;
letter-spacing: 8px;
line-height: inherit;
}
.main-menu:after {
content: '';
display: block;
clear: both;
}
/*
====================== LOGO ======================
*/
.main-menu > li.mm-logo {
margin-left: 0;
font-size: 0;
display: inline-block;
vertical-align: middle;
}
.main-menu > li.mm-logo a {
padding: 0;
line-height: 0;
}
.main-menu > li.mm-logo img {
border: none;
display: block;
padding:0px;
height: 118px;
width: 118px;
}
.main-menu > li.mm-logo:hover {
background: none;
}
/*
====================== RESPONSIVE ======================
*/
#media screen and (max-width: 768px) {
/* ====================== MAIN ====================== */
.main-menu[class*='mm-response'] > li {
position: relative;
}
.main-menu[class*='mm-response'] > li > ul{
left: 0;
right: 0;
width: auto !important;
margin-right: 0;
}
.main-menu[class*='mm-response'] > li > ul ul {
top: 100%;
margin-left: 39px !important;
}
/* ====================== SWITCH ====================== */
.main-menu.mm-response-switch > li {
display: none;
float: none;
position: relative;
width: 100%;
}
.main-menu.mm-response-switch > li + li {
margin-left: 0;
margin-top: 10px;
}
.main-menu.mm-response-switch > li.mm-logo {
display: block;
}
.main-menu.mm-response-switch > li.mm-logo img {
position: relative;
z-index: 1;
}
.main-menu.mm-response-switch:before {
font-family: FontAwesome;
content: '\f0c9';
position: relative;
float: right;
cursor: pointer;
line-height: 39px;
height: 39px;
padding: 0 14px;
z-index: 2;
}
.main-menu.mm-response-switch:hover:before {
opacity: 0;
}
.main-menu.mm-response-switch:hover > li {
display: block;
}
/* ====================== RESPONSE MARGIN ====================== */
.main-menu.mm-response-margin > li > ul {
margin-left: 39px !important;
}
}
<nav>
<ul onClick="" class="main-menu mm-response-switch">
<li class="mm-logo">
<img src="logo.png" alt="Accueil">
</li>
<li>
<i class="fa fa-indent"></i>Lien 1
</li>
<li>
<i class="fa fa-indent"></i>Lien 2
</li>
<li>
<i class="fa fa-indent"></i>Lien 2
</li>
</ul>
</nav>

There are several ways to do this;
One technique is to give the parent position: relative, then absolutely position the logo top: 50% then transformY(-50%) which translates in english to "Position the top of the logo in the parent 1/2 way down, then move the logo up 1/2 of its height.
There is a handy flow chart for different techniques to use here.
https://css-tricks.com/centering-css-complete-guide/

Try this:
.main-menu{
display: flex;
align-items: center;
}
And revert it to display:block when the screen is too small:
#media screen and (max-width: 768px)
.main-menu{
flex-direction: column;
}
If you want more info about flexbox, I suggest you this great article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Related

Can't make CSS submenu show up below its parent

I've a module which renders html menu markup. This markup can't be overridden.
So in order to make the menu look like it should I have to write some custom CSS code.
The problem is that on hover the submenu doesn't show up underneath its parent.
html:
<div class="moduletable_menu slider-menu">
<ul class="menu">
<li class="item-122 default current active">Products From Metal</li>
<li class="item-126 menu-deeper menu-parent">
Products<span class="menu-toggler"></span>
<ul class="menu-child">
<li class="item-123">Sliding Fence</li>
</ul>
</li>
</ul>
</div>
CSS:
.slider-menu {
display: block;
}
.slider-menu ul {
list-style: none;
padding: 0;
margin: 0 -15px;
z-index: 99;
display: block;
float: right;
position: relative;
}
.slider-menu ul li {
display: inline-block;
position: relative;
padding: 0;
}
.slider-menu ul li a {
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
color:#fff;
}
.slider-menu .menu-deeper.menu-parent{
display: inline-block;
position: relative;
padding: 0;
list-style: none;
}
.slider-menu .menu-deeper.menu-parent li a{
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
}
.slider-menu > ul li.menu-deeper > a::after {
font-family: "FontAwesome";
content: "\f107";
float: right;
margin-left: 7px;
}
.slider-menu .menu-child {
display: none;
}
.slider-menu .menu-child li {
display: block;
padding: 0;
position: relative;
}
.slider-menu .menu-child li > a {
font-size: 14px;
line-height: 1;
display: inline-block;
padding: 8px 0;
cursor: pointer;
}
.slider-menu .menu-deeper.menu-parent:hover > .menu-child {
animation: spFadeInUp 400ms ease-in;
display: block;
}
.slider-menu ul li a:hover {
color: red;
}
JSFiddle
So, I've missed something... Need proper corrections.

Adding position: absolute; top: 100%; to the child menu will position the menu absolutely directly below the parent li with position: relative;
.slider-menu .menu-child {
display: none;
position: absolute;
top: 100%;
}
body{
background-color:black;
}
.slider-menu {
display: block;
position:absolute;/*just to position it to the left corner in the JSFiddle example*/
top:0;
}
.slider-menu > ul {
float: right;
}
.slider-menu ul {
list-style: none;
padding: 0;
margin: 0 -15px;
z-index: 99;
display: block;
position: relative;
}
.slider-menu ul li {
display: inline-block;
position: relative;
padding: 0;
}
.slider-menu ul li a {
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
color:#fff;
}
.slider-menu .menu-deeper.menu-parent{
display: inline-block;
position: relative;
padding: 0;
list-style: none;
}
.slider-menu .menu-deeper.menu-parent li a{
display: inline-block;
padding: 0 15px;
line-height: 60px;
font-size: 14px;
margin: 0;
}
.slider-menu > ul li.menu-deeper > a::after {
font-family: "FontAwesome";
content: "\f107";
float: right;
margin-left: 7px;
}
.slider-menu .menu-child {
display: none;
}
.slider-menu .menu-child li {
display: block;
padding: 0;
position: relative;
}
.slider-menu .menu-child li > a {
font-size: 14px;
line-height: 1;
display: inline-block;
padding: 8px 0;
cursor: pointer;
}
.slider-menu .menu-deeper.menu-parent:hover > .menu-child {
animation: spFadeInUp 400ms ease-in;
display: block;
position: absolute;
top: 100%;
}
.slider-menu ul li a:hover {
color: red;
}
#keyframes spFadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
<div class="moduletable_menu slider-menu">
<ul class="menu">
<li class="item-122 default current active">Products From Metal</li>
<li class="item-126 menu-deeper menu-parent">
Products<span class="menu-toggler"></span>
<ul class="menu-child">
<li class="item-123">Sliding Fence</li>
</ul>
</li>
</ul>
</div>
Update
To match the parent text horizontally you can match the padding of 15px that the parent <li> has
.slider-menu .menu-child {
display: none;
position: absolute;
top: 100%
padding: 0 15px;
}

How to make a responsive navigation bar with menu icon

I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>

Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>

you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example

Expanded mobile navigation menu on page load

I'm trying to make my mobile menu load expanded (top level links only) on page load. I've got a second level of nested links I'd like to stay hidden. I'm sure this is a super simple fix but I've already spent an afternoon fiddling with my code that I think it's time to ask the professionals ;)
My code:
https://jsfiddle.net/ubxsksz2/
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}

It actually took me a while to get this working...
Man, you are making some crazy navbar! +1
I hope this helps you!
Keep on coding!
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
<body onload="window.location.href+='#nav';">
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
</body>

How to make a responsive navbar without bootstrap?

How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>

body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>

You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!

How do I get the width of sub menu items to auto resize

When I set the width of the sub menu to width:auto, the items with really long names gets squished together. Currently I have the width set to 175% which is not desirable as some menus can get quiet long. How can I make width:auto work for long menu items.
Link to demo site: http://previewyournewwebsite.info/otsl/
.nav.main_nav .sub-menu {
background-color: #2D556F;
display: none;
height: auto;
/* left: -5px; */
left: 0px;
margin: 0 9px 0 0;
position: absolute;
top: 54px;
width: 175%;
}
.nav.main_nav .sub-menu li {
margin: 30px 0px;
display: block;
}
.nav.main_nav .sub-menu li a {
background-image: url("./images/sub-nav-divider.png");
background-position: 0 bottom;
height: 50px;
line-height: 50px;
background-repeat: repeat-x;
font-family: Helvetica,Arial,sans-serif;
font-size: 15px;
margin-left: -31px;
padding: 0 0 0 44px;
width: 100%;
}
.nav.main_nav .sub-menu > li{
height: 50px;
line-height: 50px;
padding-left: 44px;
}
.nav.main_nav .sub-menu > li:last-child a{
background-image: none;
}
.nav.main_nav .sub-menu li {
display: block;
margin: 0;
}
Link to site: http://previewyournewwebsite.info/otsl/

Are you looking for this?
http://jsfiddle.net/coma/MNFXB/11/
nav ul, nav li {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
nav a {
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 1em;
color: #fff;
background-color: #2D556F;
white-space: nowrap;
}
nav > ul {
background-color: #2D556F;
}
nav > ul:after {
display: block;
content: "";
clear: both;
}
nav > ul > li {
float: left;
position: relative;
}
nav > ul > li > ul {
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav li:hover > a {
background-color: #92A132;
}
Or would you like something like this?
http://jsfiddle.net/coma/MNFXB/12/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Making menu vertically centred with logo image - html

Related

Can't make CSS submenu show up below its parent

How to make a responsive navigation bar with menu icon

Expanded mobile navigation menu on page load

How to make a responsive navbar without bootstrap?

How do I get the width of sub menu items to auto resize

Categories

Resources