I'm in the process of setting up a WordPress website, utilizing this specific template obtained from ThemeForest. You can view the live preview here of what I am currently working on (which should be functioning properly now - kindly inform me if it's not).
The CSS has been configured so that when hovered over, the left border turns light gray. Subsequently, upon clicking the link, the left border changes to the blue color selected.
My main issue with the navigation lies within the CSS as depicted below. The Portfolio link (Portfolio Section in the picture) still retains the selected class along with the inner unordered list item. My goal is for it to resemble the Blog Section in the image, where the Blog link no longer displays the selected class.
Upon consulting the template creator regarding this dilemma, I was informed that an additional link with the title attribute 'allportfolio' needed to be added beneath for proper functionality. I attempted adding this attribute to the primary Portfolio link but ended up closing the list entirely.
When the menu is generated, the browser structures the Portfolio selection in HTML like so:
<ul class="main-menu" id="menu-main-menu">
<li class="parent selected" id="menu-item-1172">
<p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
<div>
<ul class="sub-menu">
<li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
<li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
<li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
<li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
<li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
</ul>
</div>
</li>
An attempt was made similar to this solution, but proved ineffective due to the lack of content within the list item. Below is the jQuery code implemented:
/*Portfolio links remove selected CSS setting*/
$('ul#menu-main-menu ul.submenu li p a').click(
function(){
$('ul#menu-main-menu li').removeClass('parent selected');
$(this).addClass('parent menu-item');
});
I seem to be at an impasse as I try to achieve the desired HTML structure shown below (removing the CSS class 'selected' and introducing the CSS class 'menu-item'):
<ul class="main-menu" id="menu-main-menu">
<li class="parent menu-item" id="menu-item-1172">
<p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
<div>
<ul class="sub-menu">
<li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
<li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
<li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
<li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
<li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
</ul>
</div>
</li>
UPDATE: @limelights response appeared successful, although I noticed some conflicting jQuery affecting the link hover effects on the site which may have hindered the outcome of the code found in the scripts.js file of the WordPress template
/* Links roll over effect */
$('a').each(function(){
if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
$(this).hoverFadeColor();
})
Furthermore, I am on the brink of achieving my objective by implementing the following code to keep the internal links open:
/*Portfolio links remove selected CSS setting*/
$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
function(){
$('ul#menu-main-menu > li').removeClass('selected');
$('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
$('ul#menu-main-menu li div:first').show();
});
However, despite progress, it still shows the text appearing chosen like the selected text.
Your assistance is greatly welcomed and appreciated!