I want to change my dropdown menu, I am working with wordpress. I want my dropdown menu to look like this
for the moment the only thing I have about css, I have never been very good in the front-end part
CSS:
.site-header #navbar {
/*** hover effect ***/
}
.site-header #navbar li {
position: relative;
}
.site-header #navbar > ul > li > a {
font-size: 15px;
font-size: 1rem;
color: #222;
}
.site-header #navbar > ul .sub-menu {
background-color: #051829;
width: 220px;
position: absolute;
left: 0;
top: 130%;
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
padding:0px;
margin:0px;
}
.site-header #navbar > ul > li .sub-menu li {
border-bottom: 1px solid #072037;
}
.site-header #navbar > ul > li .sub-menu > li:last-child {
border-bottom: 0;
}
.site-header #navbar > ul > li .sub-menu a {
font-size: 13px;
font-size: 0.86667rem;
color: #c3bfbf;
display: block;
padding: 11px 15px;
}
.site-header #navbar > ul > li .sub-menu a:hover {
background-color: #fdc900;
color: #fff;
}
.site-header #navbar > ul > li > .sub-menu .sub-menu {
left: 110%;
top: 0;
}
.site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a {
position: relative;
}
.site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before {
font-family: "FontAwesome";
content: "\f105";
font-size: 15px;
font-size: 1rem;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.site-header #navbar > ul > li:hover > .sub-menu {
top: 100%;
visibility: visible;
opacity: 1;
}
.site-header #navbar .sub-menu > li:hover > .sub-menu {
left: 100%;
visibility: visible;
opacity: 1;
}
For the dropdown I'm using this library from github
This is how look like my dropdown
hope someone helpme
Related
I have developed a three level menu using the jQuery Menu maker plugin. The issue which I am facing is quite weird and I am unable to know why is this happening.
When I hovering over the first dropdown menu option (About) it's submenu opens up but when try to hover on it the submenu disappears. The same thing happens with the last menu option(More).
All the menu option in between work perfectly and I am able to view and explore their submenus.
I have tried setting the top value to negative, zero etc but no success.
I am sharing the link to the website and the CSS code.
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #fff;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #000;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
/* #cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
} */
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
right: 14px;
display: block;
font-family: FontAwesome;
content: "\f107";
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
/* #cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
} */
#cssmenu ul ul {
z-index: 1;
position: absolute;
top: 100%;
left: auto;
opacity: 0;
webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
visibility: hidden;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
visibility: visible;
webkit-transform: scaleY(1);
transform: scaleY(1);
visibility: visible;
opacity: 1;
z-index: 1;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #000;
font-weight: 400;
background: #fff;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a
/* #cssmenu ul ul li a:hover {
color: #ffffff;
} */
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
li.sub_menu_option > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
/* width: 2px;
height: 8px; */
/* background: #dddddd; */
font-family: 'FontAwesome';
content: "\f105";
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
/* #cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
} */
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #000;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #000;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #fff;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
background-color: #000;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 8px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
/* border-left: 1px solid rgba(120, 120, 120, 0.2); */
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 46px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 19px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 22px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
.align_m_right{
text-align: right;
}
li.align_m_right>a::after{
content: "";
}
li.align_m_right>a::before{
content: "\f104";
right: auto;
left: 14px;
font-family: 'FontAwesome';
}
Website having the issue
Found the reason behind such behavior. The CSS is correct. It was because of the carousel element which was after the navigation menu. I just applied a z-index of 0 to it and now the menu is working perfectly fine.
Still I have this doubt on why did another elements z-index level affected this menu? If anyone knows the reason behind this then do share.
It's because you were originally setting the submenu to position absolute without setting the z-index.
remember its cascading style sheets and HTML is processed top-down so the element would naturally have a z index "under" the carosel element.
I am not sure about your carosels css or the js running it as its not include but I know I can code a carosel to show and hide an element using the z index property and a set interval so that may also be the issue, that the carosel has a z index stated.
i have this table on my page and the css for navbar is given below
the problem is that when the menu falls from navbar its goes right underneath the table. obviously i want it to stay on top of every on the page.
<div class="row" style="margin-top: 50px;">
<div class="col-lg-12">
<table class="table table-bordered">
<tbody>
<tr>
<th class="info">o</th>
<th class="info">Td</th>
<th class="info">jdj</th>
<th class="info">jd</th>
<th class="info">js</th>
</tr>
<script type="text/javascript">
//further fetch data using javascript
The css and jquery for navbar:
<style>
* {
margin: 0;
padding: 0;
text-decoration: none
}
header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #97455f;
float: left;
width: auto
}
.logo a {
color: #97455f;
}
nav {
position: relative;
width: 100%;
margin: 0 auto;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu {
font-family: sans-serif;
background: #333
}
#cssmenu > ul > li {
display:inline-block;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight: 700;
}
#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
color: #fff
}
#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
background: #97455f!important;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#cssmenu ul ul {
position: absolute;
left: -9999px
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
background: #333;
transition: all .25s ease
}
#cssmenu ul ul li:hover {} #cssmenu li:hover > ul {
left: auto
}
#cssmenu li:hover > ul > li {
height: 35px
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #ddd;
font-weight: 400;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #fff
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #363636;
}
#cssmenu ul ul ul li.active a {
border-left: 1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active> a {
border-top: 1px solid #333
}
#media screen and (max-width: 1000px) {
.logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
text-align: center;
padding: 10px 0 0 0;
float: none
}
.logo2 {
display: none
}
nav {
width: 100%;
}
#cssmenu {
width: 100%;
text-align:center;
}
#cssmenu ul {
width: 100%;
display: none
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #444
}
#cssmenu ul li:hover {
background: #363636;
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0
}
#cssmenu > ul > li {
float: none
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul li {
background: #333!important;
}
#cssmenu ul ul li:hover {
background: #363636!important
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul li a {
color: #ddd;
background: none
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #fff
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 23px;
color: #ddd;
font-size: 12px;
font-weight: 700
}
.button {
width: 55px;
height: 46px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 12399994;
}
.button:after {
position: absolute;
top: 22px;
right: 20px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: ''
}
.button:before {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 16px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #ddd;
content: ''
}
.button.menu-opened:after {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.button.menu-opened:before {
top: 23px;
background: #fff;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #444;
height: 46px;
width: 46px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: #262626
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before {
display: none
}
#cssmenu ul ul ul li.active a {
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: none
}
}
#cssmenu > ul {float:right;}
#cssmenu ul ul a {text-align: left;}
</style>
jquery is as follows:
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
$(this).find(".button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
}
else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
}
else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
var mediasize = 1000;
if ($( window ).width() > mediasize) {
cssmenu.find('ul').show();
}
if ($(window).width() <= mediasize) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
format: "multitoggle"
});
});
})(jQuery);
section from navbar:
<li >some
<ul>
<li><a href="#>some</a></li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
<li>some</li>
</ul>
</li>
i cant seem to locate where i am going wrong with this. any help would be very much appreciated.i wish that when the menu falls down the content remains on top of everything but instead it goes right underneath the table that i have on my page. i have spent hours looking for what i am doing wrong but i can overlook even smallest of my mistakes. kindly help!
I'm not 100% following how your code is working, but making sure the z-index of the navbar is greater than the z-index of the table (if there is one) should work.
This is Structure HTML :
<div id="menu" class="col-md-12 menu-inner menu-nav">
<ul class="nav-effect">
//looping for HEAD-MENU => Computer
<li>
<a>COMPUTER</a>
<div class="sub-menu">
<ul>
// looping sub-menu computer => dekstop
<div class="sub-child">
<li>DEKSTOP</a></li>
//looping FOR SUB-MENU DEKSTOP
<li><a>DEKSTOP ASUS</a></li>
<li><a>DEKSTOP DELL</a></li>
//
</div>
//
</ul>
</div>
</li>
//
</ul>
</div>
CSS:
#menu {
position: relative;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
float: left;
z-index: 20;
}
#menu > ul > li:hover {}
#menu > ul > li > a {
text-decoration: none;
display: block;
z-index: 6;
}
#menu > ul > li > div {
display: none;
background: #26348b;
position: absolute;
z-index: 5;
padding: 0 10px;
margin-top: 3px;
left: 0;
border-top: 1px solid #fff;
width: 100%; //REMOVE THIS <<==
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li > div > ul > div > li a {
display: block;
white-space: nowrap;
min-width: 110px;
}
.sub-menu > ul > .sub-child {
width: 25%;
float: left;
display: block;
}
#menu > ul > li > .sub-menu > ul > .sub-child > li:first-child a {
font-size: 1.2em;
color: #8dc63f;
}
.menu-inner {
background: #26348b;
margin: 20px 0 15px;
padding: 0!important;
height: 33px;
}
.menu-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu-nav ul li {
border-right: 1px solid #fff;
padding: 7px 59px 3px;
}
.menu-nav ul li li {
padding: 5px 0 0;
border-right: none;
margin: 5px 0 2px 15px;
}
.menu-nav ul li:last-child {
border-right: none
}
.menu-nav ul li a {
color: #fff;
position:relative;
}
.menu-nav ul li a:hover {
text-decoration: none;
}
.nav-effect li a {
padding: 0 0 5px;
}
.nav-effect li > a::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #f6a328;
content: '';
opacity: 0;
-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.nav-effect li > a:hover::after,
.nav-effect li > a:focus::after {
height: 3px;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
ul.nav-effect li ul li a {
font-weight: normal;
}
ul.nav-effect li div ul div li a {
font-weight: normal;
}
I already set css and everything is fine except last menu (Accessories and Peripheral)?
For more details, Please check Here
Idkw only the last menu have problem, maybe because too much content? or text to long?
Where I did mistake?
Thanks Advance
Having a huge struggle here as I am not an expert but I'm just trying to center this menu. I've been at it for ages and I know one of you guys will correct me in a heartbeat.
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: center;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: center;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
and
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Showreel</a>
<li><a href='#'>About Us</a></li>
<li><a href='#'>The Team</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
Would be great to get your help!
#cssmenu {
text-align: center;
}
#cssmenu ul {
display: inline-block;
}
#cssmenu ul li {
display: inline-block;
}
#cssmenu ul li a {
display: block;
/* Other Link styles here */
}
Hmm.. if it is okay that you use a Web Framework, I will use the MaterializeCSS framework because it makes things much easier.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
</head>
<body>
<nav>
<ul class = "center">
<li>Home</li>
</ul>
</nav>
</body>
</html>
If you run the example above, "home" will be centered!
Basically, you need to get rid of your float: left on your li's and instead give them display: inline-block. Then you can use text-align: center on the parent ul to center your menu.
CodePen
#cssmenu > ul {
margin: 0
text-align: center;
}
#cssmenu > ul > li {
display: inline-block;
padding: 15px;
}
So I am trying to change the font weight of the top level navbar links to look like this:
My issue is that changing the font-weight seems to do nothing and I'm curious as to why. Here is my CSS (Might be easier to see if there is surrounding code causing the issue)
#font-face {
font-family: Fabrica;
src: url(Fabrica.otf);
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Fabrica;
font-weight: 900;
background: #000000;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 900;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 16px;
height: 16px;
background: url(icon.png) no-repeat;
content: '';
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px dotted #eaebcc;
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 200;
background: #000000;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: bolder;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
Obviously the property is not being applied to the font weight but I'm not entirely sure why
font Fabrica doesn't support different weights