When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing subscriptions.
To see the exact position of the menu icons, please visit this website.
My current challenge revolves around aligning the search and newsletter icons within the menu bar. Currently, clicking on the search icon causes the newsletter icon to shift positions unexpectedly.
Below is an excerpt from my JavaScript file:
jQuery(document).ready(function( $ ) {
//Javascript Detection
$('body').removeClass('no-js');
//Read More Link
function readmorelink() {
$('a.more-link').closest('p').css('text-align', 'center');
}
readmorelink();
//Flexslider
function flexslider() {
$('.flexslider').flexslider({
animation: "fade",
slideshow: false,
});
$(".flex-next").html('<i class="icon-chevron-right"></i>');
$(".flex-prev").html('<i class="icon-chevron-left"></i>');
}
flexslider();
//Fitvid
function fitvids() {
$(".featured-preview").fitVids();
}
fitvids();
//Comments Toggle
$(".comments-wrapper").hide();
$("#comments-title").attr('class', 'comments-close');
$("#comments-title").toggle(function () {
$(".comments-wrapper").slideDown();
$(this).attr('class', 'comments-open');
$('html, body').animate({
scrollTop: $("#comments-title").offset().top
}, 0);
return false;
}, function (){
$(".comments-wrapper").slideUp();
$(this).attr('class', 'comments-close');
return false;
})
//Infinite Scroll
if ((custom_js_vars.infinite_scroll) == 'no') {
} else {
$('.posts').infinitescroll({
loading: {
msgText: "...Loading Posts...",
finishedMsg: "- End of Posts -"
},
nextSelector: '.post-nav-next a',
navSelector: '.post-nav',
itemSelector: 'article',
contentSelector: '.posts',
appendCallback: true
},function () {
fitvids();
readmorelink();
flexslider();
});
}
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").toggleClass("newClass");
});
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").delay(1000).queue(function(next){
$(this).toggleClass("newClass");
next();
});
});
//Cabinet Toggle
$('#cabinet-toggle, #cabinet-toggle-mobile').click(function () {
$("#cabinet-slider").slideToggle(0);
$(".icon-plus-sign").attr('class', 'icon-minus-sign');
return false;
}, function () {
$("#cabinet-slider").slideToggle(0);
$(".icon-minus-sign").attr('class', 'icon-plus-sign');
return false;
});
//Responsive Menu
$('.nav').mobileMenu();
$('select.select-menu').each(function(){
var title = $(this).attr('title');
if( $('option:selected', this).val() != '' ) title = $('option:selected',this).text();
$(this)
.css({'z-index':10,'-khtml-appearance':'none'})
.after('<span class="select"></span>')
});
});