I am learning to convert HTML website to WordPress. I want to register this menu but does not know how to call these classes. wp_nav_menu anyone can help me to fix this menu into website with code.
Below function used to register menu in functions.php
<?php register_nav_menus(array('primary-menu'=>'Header Menu'))?>
<div class="ft_menu_ver_2">
<nav>
<ul id="menu-main-menu" class="menu"><li id="menu-item-1634" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1634">Home
<ul class="sub-menu">
<li id="menu-item-3407" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3407">Water Filters</li>
<li id="menu-item-3408" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3408">Linen Care</li>
<li id="menu-item-3884" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3884">Air Conditioner</li>
<li id="menu-item-6652" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6652">Vacuum Cleaners</li>
<li id="menu-item-6653" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6653">Sewing Machine</li>
<li id="menu-item-10506" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10506">Sports at Home</li>
<li id="menu-item-14337" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-14337">Home Security</li>
</ul>
</li>
<li id="menu-item-3666" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3666">Bedroom
<ul class="sub-menu">
<li id="menu-item-3406" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3406">Mattress</li>
<li id="menu-item-11285" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11285">Pillows</li>
</ul>
</li>
<li id="menu-item-1420" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1420">Kitchen
<ul class="sub-menu">
<li id="menu-item-11281" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11281">Dishwasher</li>
<li id="menu-item-9327" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9327">Coffee</li>
<li id="menu-item-2309" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2309">Juice Extractors</li>
<li id="menu-item-11282" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11282">Blenders</li>
<li id="menu-item-8364" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8364">Barbecue</li>
<li id="menu-item-14336" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-14336">Deep Fryer</li>
</ul>
</li>
<li id="menu-item-10502" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-10502">Bathroom
<ul class="sub-menu">
<li id="menu-item-11283" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11283">Bathroom</li>
</ul>
</li>
<li id="menu-item-5579" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5579">Gardening
<ul class="sub-menu">
<li id="menu-item-8365" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8365">Mower</li>
</ul>
</li>
<li id="menu-item-3665" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3665">Who we are ?</li>
</ul> </nav>
</div>
<nav class="ft_menu_mobile_ver_2">
<div class="close"></div>
<ul id="menu-main-menu-1" class="menu"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1634">Home
<ul class="sub-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3407">Water Filters</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3408">Linen Care</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3884">Air Conditioner</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6652">Vacuum Cleaners</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6653">Sewing Machine</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-10506">Sports at Home</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-14337">Home Security</li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-3666">Bedroom
<ul class="sub-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3406">Mattress</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11285">Pillows</li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-1420">Kitchen
<ul class="sub-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11281">Dishwasher</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-9327">Coffee</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2309">Juice Extractors</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11282">Blenders</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8364">Barbecue</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-14336">Deep Fryer</li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-10502">Bathroom
<ul class="sub-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11283">Bathroom</li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5579">Gardening
<ul class="sub-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-8365">Mower</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3665">Who we are ?</li>
</ul> </nav>
<div class="ft_search_btn ftv2-search-actions">
<svg class="ftlg-btn-search" width="20" height="19" viewBox="0 0 20 19" fill="none">
<path d="M18.7778 17.275L14.2639 12.5803C15.4245 11.2006 16.0604 9.46469 16.0604 7.65751C16.0604 3.43523 12.6252 0 8.40288 0C4.18059 0 0.745361 3.43523 0.745361 7.65751C0.745361 11.8798 4.18059 15.315 8.40288 15.315C9.98798 15.315 11.4985 14.8369 12.79 13.9294L17.3382 18.6597C17.5283 18.8571 17.784 18.966 18.058 18.966C18.3174 18.966 18.5634 18.8671 18.7502 18.6873C19.147 18.3055 19.1597 17.6722 18.7778 17.275ZM8.40288 1.99761C11.5238 1.99761 14.0628 4.53658 14.0628 7.65751C14.0628 10.7785 11.5238 13.3174 8.40288 13.3174C5.28194 13.3174 2.74297 10.7785 2.74297 7.65751C2.74297 4.53658 5.28194 1.99761 8.40288 1.99761Z"/>
</svg>
<svg class="ftlg-btn-close" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="20.3644" height="2.26271" rx="0.4"
transform="matrix(-0.707096 -0.707118 -0.707096 0.707118 20 18.4)"/>
<rect width="20.3644" height="2.26271" rx="0.4"
transform="matrix(0.707096 -0.707118 0.707096 0.707118 4 18.4)"/>
</svg>
</div>
<div class="ftlg-search-wrap ftv2-search-wrap">
<div class="ftlg-search-inner">
<form role="search" method="get" class="search-form" action="https://mywebsite.com/">
<input type="text" name="s"
placeholder="" class="re-ajax-search" autocomplete="off" data-posttype="post">
<input type="hidden" name="post_type" value="post"/>
<button type="submit" class="btnsearch"><i class="fa fa-search"></i></button>
</form>
<div class="re-aj-search-wrap"></div> </div>
</div>
</div>
</div>
</div>
</div>
<div class="ft_submenu_box_mask"></div>
This above html code with css is used in my html website for navigation menu. This menu is responsive on tablet and mobile with side menu
Related
I got a problem with menu and adding scroll to it.
Ive added scroll(removed if afterwards) but then my other sub items are not showing, i tryed everything and I deciced to ask for help.
Ill try to explain a bit more:
I dont want horizontal scroll, I want vertical scroll and then when I hover over lets say "GELOVI" in shop I want that sub menu to pop out like it does without a scroll.
If you didn't understand me clearly please ask I will do my best to explain a bit more.
I am adding code sample here.
Thank you in advance.
<ul class="sub-menu">
<li id="nav-menu-item-16752" class="menu-item menu-item-type-custom menu-item-object-custom" data-cols="1">Novosti</li>
<li id="nav-menu-item-16663" class="menu-item menu-item-type-post_type menu-item-object-page" data-cols="1">Akcije</li>
<li id="nav-menu-item-15809" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Sjajevi i baze</li>
<li id="nav-menu-item-18250" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Gelovi
<ul class="sub-menu">
<li id="nav-menu-item-27918" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Clear gelovi</li>
<li id="nav-menu-item-27919" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Cover gelovi</li>
<li id="nav-menu-item-27917" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Babyboomer gelovi</li>
<li id="nav-menu-item-27922" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">French gelovi</li>
<li id="nav-menu-item-27920" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Exclusive gelovi</li>
</ul>
</li>
<li id="nav-menu-item-15786" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Babe lak
<ul class="sub-menu">
<li id="nav-menu-item-15787" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Babe</li>
<li id="nav-menu-item-15788" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Glitter Babe</li>
<li id="nav-menu-item-15796" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">4in1 Babe</li>
<li id="nav-menu-item-15797" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Collection Babe</li>
</ul>
</li>
<li id="nav-menu-item-16838" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Primeri i tekućine
<ul class="sub-menu">
<li id="nav-menu-item-25736" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Acetoni i Cleaneri</li>
<li id="nav-menu-item-19601" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Primeri i priprema nokta</li>
<li id="nav-menu-item-25735" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ulja za kutikulu</li>
</ul>
</li>
<li id="nav-menu-item-15805" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Rašpe
<ul class="sub-menu">
<li id="nav-menu-item-15807" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Rašpe</li>
<li id="nav-menu-item-15806" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Polir blokovi</li>
</ul>
</li>
<li id="nav-menu-item-15808" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Šablone</li>
<li id="nav-menu-item-27530" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Tipse i ljepilo</li>
<li id="nav-menu-item-17082" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Kistovi
<ul class="sub-menu">
<li id="nav-menu-item-21977" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Gel</li>
<li id="nav-menu-item-21978" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Nail Art</li>
<li id="nav-menu-item-21981" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ostalo</li>
</ul>
</li>
<li id="nav-menu-item-15798" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Metalni pribor</li>
<li id="nav-menu-item-17127" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Električna oprema
<ul class="sub-menu">
<li id="nav-menu-item-27713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Električna oprema</li>
<li id="nav-menu-item-27716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Nastavci comby manikura</li>
<li id="nav-menu-item-27717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Nastavci skidanje gela</li>
<li id="nav-menu-item-17232" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dodatna oprema</li>
</ul>
</li>
<li id="nav-menu-item-15791" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Dodatna oprema
<ul class="sub-menu">
<li id="nav-menu-item-16959" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Display</li>
<li id="nav-menu-item-27608" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Četkice za prašinu</li>
<li id="nav-menu-item-16958" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ostalo</li>
</ul>
</li>
<li id="nav-menu-item-15789" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Ukrasi
<ul class="sub-menu">
<li id="nav-menu-item-16522" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Aurora prah</li>
<li id="nav-menu-item-15816" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ukrasi u kolutu</li>
<li id="nav-menu-item-21754" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Cirkoni</li>
<li id="nav-menu-item-27824" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Folije</li>
<li id="nav-menu-item-15818" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Glitteri</li>
</ul>
</li>
<li id="nav-menu-item-19653" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">MERCH</li>
<li id="nav-menu-item-15792" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Fashion
<ul class="sub-menu">
<li id="nav-menu-item-15793" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Majice i hudice</li>
<li id="nav-menu-item-15799" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Maskice</li>
<li id="nav-menu-item-15801" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Pregača</li>
<li id="nav-menu-item-15800" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ostalo</li>
</ul>
</li>
<li id="nav-menu-item-15802" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1">Gift card</li>
<li id="nav-menu-item-15795" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Trepavice
<ul class="sub-menu">
<li id="nav-menu-item-15813" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Volumenske i klasične</li>
<li id="nav-menu-item-15812" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Pincete</li>
<li id="nav-menu-item-15811" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Ljepila</li>
<li id="nav-menu-item-15810" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dodatna oprema</li>
</ul>
</li>
<li id="nav-menu-item-18737" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Zadnji artikli – 2mBeauty
<ul class="sub-menu">
<li id="nav-menu-item-18971" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">2mBeauty Gelovi</li>
<li id="nav-menu-item-20365" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Sjajevi i baze</li>
<li id="nav-menu-item-20370" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Tekućine 2mBeauty</li>
<li id="nav-menu-item-18972" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">Color Gel
<ul class="sub-menu">
<li id="nav-menu-item-20032" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Carving</li>
<li id="nav-menu-item-20033" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Effect gel</li>
<li id="nav-menu-item-20034" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">HC Magic Art Liquid</li>
<li id="nav-menu-item-20035" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Plasteline</li>
<li id="nav-menu-item-20036" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Spider</li>
<li id="nav-menu-item-20037" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Stamping</li>
<li id="nav-menu-item-21466" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Termo</li>
</ul>
</li>
<li id="nav-menu-item-18739" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children">Mini Me
<ul class="sub-menu">
<li id="nav-menu-item-20025" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">All in</li>
<li id="nav-menu-item-20026" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Cracking</li>
<li id="nav-menu-item-20027" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Elastic Base</li>
<li id="nav-menu-item-20028" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Galaxy</li>
<li id="nav-menu-item-20029" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Holo</li>
<li id="nav-menu-item-20030" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Intense</li>
<li id="nav-menu-item-20031" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Metal</li>
<li id="nav-menu-item-20270" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">MAGNET EFFECT 5D</li>
</ul>
</li>
<li id="nav-menu-item-20345" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Acryl Gel</li>
<li id="nav-menu-item-20373" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dip&Go</li>
<li id="nav-menu-item-20392" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Rašpe 2mBeauty</li>
<li id="nav-menu-item-20393" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Dodatna oprema</li>
</ul>
</li>
<li id="nav-menu-item-15794" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1">Oklagije za maderoterapiju
<ul class="sub-menu">
<li id="nav-menu-item-15804" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Oklagije za tijelo</li>
<li id="nav-menu-item-15803" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat">Oklagije za lice</li>
</ul>
</li>
</ul>
Web: https://rich-nails.com/
Menu item: Shop
Please help me add scroll to it and make everything work good.
best regards,
Borna
I don't know exactly what you want to do because you say "Ive added scroll" and I don't see scroll in this menu, but to add scroll to you're shop menu you can do this :
.sub-menu {
max-height: 400px;
overflow-y: scroll;
}
At this page, there is a vertical menu in the left column. Some of the nav menu items have flyout submenu items. I'd like to place a right arrow (http://www.salsalis.com.au/wp-content/themes/twentyfourteen/images/rarrow.png) to the right of every LI that contains a UL.submenu, so that it looks like this, but I can't find a way to do this.
http://imgur.com/a/rJVU2
(For the last 2 months the IMG embed # stackoverflow.com seems broken)
Here is the Wordpress nav menu HTML: (messy as it is):
<div class="menu-main_menu-container">
<ul style="min-height: 600px; height: 259px;" class="sub-nav">
<li id="menu-item-24" class="home_page menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-24">Home</li>
<li id="menu-item-23" class="accommodation_page menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-23">Accommodation
<ul class="sub-menu">
<li id="menu-item-128" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-128">Wilderness Tents</li>
<li id="menu-item-1381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1381">Honeymoon Tent</li>
<li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129">Rates</li>
<li id="menu-item-130" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130">The Lodge</li>
<li id="menu-item-127" class="food_page menu-item menu-item-type-post_type menu-item-object-page menu-item-127">Food And Wine</li>
<li id="menu-item-126" class="location_page menu-item menu-item-type-post_type menu-item-object-page menu-item-126">Location</li>
<li id="menu-item-125" class="getting_page menu-item menu-item-type-post_type menu-item-object-page menu-item-125">Getting There</li>
</ul>
</li>
<li id="menu-item-124" class="experiance_page menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-124">Experience
<ul class="sub-menu">
<li id="menu-item-967" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-967">Wave Rider</li>
<li id="menu-item-122" class="whale_page menu-item menu-item-type-post_type menu-item-object-page menu-item-122">Whale Shark Swim</li>
<li id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-835">Humpback Swim</li>
<li id="menu-item-121" class="snorkelling_page menu-item menu-item-type-post_type menu-item-object-page menu-item-121">Snorkelling</li>
<li id="menu-item-120" class="guidgorge_page menu-item menu-item-type-post_type menu-item-object-page menu-item-120">Guided Walks</li>
<li id="menu-item-119" class="kayaking_page menu-item menu-item-type-post_type menu-item-object-page menu-item-119">Kayaking</li>
<li id="menu-item-118" class="fising_page menu-item menu-item-type-post_type menu-item-object-page menu-item-118">Fishing</li>
</ul>
</li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-165">Special Offers
<ul class="sub-menu">
<li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-183">Sail and Snorkel Ningaloo</li>
<li id="menu-item-1654" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1654">Private Charter Flight Packages</li>
</ul>
</li>
<li id="menu-item-117" class="about_page menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-117">About Us
<ul class="sub-menu">
<li id="menu-item-116" class="ecocre_page menu-item menu-item-type-post_type menu-item-object-page menu-item-116">Eco Credentials</li>
<li id="menu-item-1174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1174">Sal Salis Facts</li>
<li id="menu-item-1362" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1362">Testimonials</li>
<li id="menu-item-1616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1616">Seasonal Calendar</li>
<li id="menu-item-1218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1218">Download Information</li>
<li id="menu-item-115" class="gallery_page menu-item menu-item-type-post_type menu-item-object-page menu-item-115">Image Gallery</li>
<li id="menu-item-114" class="terms_page menu-item menu-item-type-post_type menu-item-object-page menu-item-114">Terms And Conditions</li>
</ul>
</li>
<li id="menu-item-113" class="enquire_page menu-item menu-item-type-post_type menu-item-object-page menu-item-113">Contact Us</li>
<li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311">Blog</li>
</ul>
</div>
Make use of pseudo elements
Try this
CSS
ul.sub-nav > li.menu-item-has-children::after{
content: "";
position: absolute;
right: 0px;
height: 0px;
top: 0;
bottom: 0;
margin: auto;
border: 6px solid transparent;
border-left-color: #fff;
}
hope this helps..
I am working on WordPress sidebar menu, I want to get link active when click on that particular link.
<ul id="menu-home" class="menu">
<li id="menu-item-10"
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10">
Home
</li>
<li id="menu-item-50"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
About
</li>
<li id="menu-item-48"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
Services
</li>
<li id="menu-item-47"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
Gallery
</li>
<li id="menu-item-49"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
Contact
</li>
<li id="menu-item-235"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235">
Blog
</li>
</ul>
Add following CSS
.current_page_item {
color: #920606
}
Change hexadecimal code based on your design
On my WordPress website I have used wp_nav_menu to create the navigation bar. Because of this I have limited control over the HTML, for one of the navigation links I have started styling it to be a dropdown. However, the CSS for the rest of the navigation bar is interfering with this, how can I modify the HTML so that I can separate the two?
HTML -
<nav class="site-nav">
<div class="menu-primary-menu-links-container"><ul id="menu-primary-menu-links" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">Contact</li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">Tuition</li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-28 current_page_item current_page_parent menu-item-38">Blog</li>
<li id="menu-item-107" class="test menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-107">Gallery
<ul class="sub-menu">
<li id="menu-item-119" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-119">Animals</li>
<li id="menu-item-120" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-120">Contemporary Space Images</li>
</ul>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-42">Home</li>
</ul>
I have created a WordPress site for a client, in which you filter through the navigation menu (set-up in appearance->menu) by revealing hidden items (unordered lists with class "sub-menu (generated through WordPress menu function)).
There are three hierarchal tiers; Pages>custom-links>Posts. When the page is clicked, the children (custom-links) are revealed, when a custom link is clicked, the children posts are revealed.
Then, when you are on a post, the path taken is highlighted in the navigation.
This is done through css and current/parent/ancestor classes generated with the wp_nav_menu function.
The mark-up generated by the wp_nav_menu function is this:
<ul id="menu-menu-2" class="main_menu"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-155">Design
<ul class="sub-menu">
<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-152">#DesignCat1
<ul class="sub-menu">
<li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-207">DesignC1P1</li>
<li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-206">DesignC1P2</li>
</ul>
</li>
<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-153">#DesignCat2
<ul class="sub-menu">
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-144">DesignC2P1</li>
<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-143">DesignC2P2</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-156">Research
<ul class="sub-menu">
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-149">#ResearchCat1
<ul class="sub-menu">
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-205">ResearchC1P1</li>
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-204">ResearchC1P2</li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-150">#ResearchCat2
<ul class="sub-menu">
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140">ResearchC2P1</li>
<li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-139">ResearchC2P2</li>
</ul>
</li>
</ul>
</li>
</ul>
The current page being "DesignC1P1", it's assigned a class of "current-menu-item", its parent (a custom link(#DesignCat1)) assigned "current-menu-parent" and its ancestor (a page(Design)) assigned "current-menu-ancestor". So, with CSS I do:
.current-menu-item > .sub-menu, .current-menu-parent > .sub-menu, .current-menu-ancestor > .sub-menu {
visibility: visible;
display: inline;
}
.current-menu-item > a, .current-menu-parent > a, .current-menu-ancestor > a {
color: #000;
text-decoration: none;
}
Which works well, it keeps all the relevant menu items visible and highlighted in black.
My issue is that my client has specifically asked for posts to be in more than one location in the menu, IE the same post could be under Design page and Research Page, or under two different custom-links in design/research. That means the same mark up is generated for the two item locations, and both paths are shown rather than the path taken. Here is what the generated code with the "Same Post" under #DesignCat1 and #ResearchCat1 would look like:
<ul id="menu-menu-2" class="main_menu"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-155">Design
<ul class="sub-menu">
<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-152">#DesignCat1
<ul class="sub-menu">
<li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-202">Same Post</li>
</ul>
</li>
<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-153">#DesignCat2
<ul class="sub-menu">
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-144">DesignC2P1</li>
<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-143">DesignC2P2</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-156">Research
<ul class="sub-menu">
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-149">#ResearchCat1
<ul class="sub-menu">
<li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-203">Same Post</li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-150">#ResearchCat2
<ul class="sub-menu">
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140">ResearchC2P1</li>
<li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-139">ResearchC2P2</li>
</ul>
</li>
</ul>
</li>
</ul>
Any ideas how to highlight only the path taken, rather than both? I know HTML,CSS and a bit of java, not so good with PHP! Any help would be greatly appreciated!