The following article, BKNS will guide you how to create horizontal menu in wordpress Very simple for your reference. Let's follow along
>> Learn more: What is WordPress? Everything you need to know about WordPress
How to create horizontal menu in wordpress
Step 1: First you need Backup CSS
Step 2: Add the following code to Custom Css and styles.css in Thesis 2
/**************[Menu Horizontal ]**********/
ul.fmt_dropdown,
ul.fmt_dropdown li,
ul.fmt_dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.fmt_dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.fmt_dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.fmt_dropdown li.hover,
ul.fmt_dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.fmt_dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.fmt_dropdown ul li {
float: none;
}
ul.fmt_dropdown ul ul {
top: 1px;
left: 99%;
}
ul.fmt_dropdown li:hover > ul {
visibility: visible;
}
ul.fmt_dropdown-linear {
width: 100%;
}
ul.fmt_dropdown-linear ul li {
float: left;
}
ul.fmt_dropdown-linear li.hover,
ul.fmt_dropdown-linear li:hover {
position: static;
}
ul.fmt_dropdown-linear ul ul {
display: none !important;
}
ul.fmt_dropdown {
font-weight: bold;
}
ul.fmt_dropdown li {
padding: 12px 10px;
border-left: 1px solid #7E6500;
color: #FFF;
border-right: 1px solid #E2B80E;
text-transform: uppercase;
}
ul.fmt_dropdown li:last-child {border-right:none;}
ul.fmt_dropdown li.hover,
ul.fmt_dropdown li:hover {
color: #000;
}
ul.fmt_dropdown a {color:#fff;background:none;border:0}
ul.fmt_dropdown a:visited { color: #fff; text-decoration: none; }
ul.fmt_dropdown a:hover { color: #eee; }
ul.fmt_dropdown a:active { color: #eee; }
/* -- level mark -- */
ul.fmt_dropdown ul {
width: 150px;
margin-top: 1px;
}
ul.fmt_dropdown ul li {
font-weight: normal;
}
ul.fmt_dropdown *.sub-menu {
padding-right: 20px;
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.fmt_dropdown {
width: 1000px;
margin: 0 auto;
float: none;
display: block;
}
ul.fmt_dropdown li {
background:none;
}
,
ul.fmt_dropdown li:hover {
color: #fff;
}
ul.fmt_dropdown ul {
max-width: 980px;
margin-top: 40px;
background: #EBD852; /*Background Menu con*/
height: 42px; /* Chieu cao menu con */
left:0;
width: auto;
padding-left:0px;
text-transform: uppercase;
}
ul.fmt_dropdown li ul li a{padding:8px 15px;}
/**Chú ý Chú ý**/
li.menu-item-15 ul.sub-menu{padding-left:250px;width:730px} /* tong cong 980px */
li.menu-item-80 ul.sub-menu{padding-left:425px;width:555px}/* tong cong 980px */
ul.fmt_dropdown li ul li a,
ul.fmt_dropdown li ul li a:visited {color:#000}
ul.fmt_dropdown ul li a {line-height:15px}
ul.fmt_dropdown ul li a:hover {
margin: 0;
border: none;
color:#BF8D00;
background:none;
}
ul.fmt_dropdown ul *.sub-menu {
padding-right: 7px;
background-image: none;
}
ul.sub-menu li {background:none;border:0}
/*---[End Menu Horizontal ]--*/
Step 3:
In case of a regular theme, you need to add the following code to functions.php:
<?php
add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
$classes[] = "fmt_dropdown fmt_dropdown-linear";
return $classes;
}
?>
As for Thesis, you access the HTML Editor, search for the menu box and add the class fmt_dropdown fmt_dropdown-linear
Step 4: Edit color, height to suit your menu.
Above, BKNS has provided you with a way to create horizontal menu in wordpress. Hopefully, the information that BKNS provides is useful to you. If you have any doubts, please let BKNS know through the comments section below. Regularly visit the website bkns.vn Stay tuned for more useful posts!
>> Learn more:
My name is Thinh Hanh, currently the CEO of BKNS. I will provide you with information technology services and network solutions in the fastest and most effective way.
Post a Comment
Post a Comment