Customising the WordPress Toggle menu [toggle]

  • Hi,

    Can somebody please tell me how I can change the toggle menu image on hover? This is doing my head in! I want to change the background image (+ icon) to white like it’s active state after the user has clicked on a menu item.

    Please take a look and scroll to the bottom of the page. My toggle menu is contained within a [tab] menu.

    The CSS:

    .toggle {
    padding: 0 0 2px 0;
}
.toggle .trigger {
	background-color: #f5f5f5;
	background: -moz-linear-gradient(bottom, #F2F2F2 0px, #ffffff 100%);
	background: -webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #ffffff));
	border: 1px solid #dddddd;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #666666;
	display: block;
	padding: 10px 12px 10px 40px;
	position: relative;
	text-decoration:none;
	height:1%;
	}

.toggle .trigger span {
	background: url(includes/images/toggle.png) 0 0 no-repeat;
	display: block;
	position: absolute;
	top: 9px;
	left: 10px;
	text-indent: -9999px;
	width: 22px;
	height: 20px;
	}

.toggle .trigger:hover,
.toggle .active {
	background:#333399;
	color:#fff;
	}
.toggle .active span {
	background: url(includes/images/toggle-white.png) 0 0 no-repeat;
	background-position: 0 -20px;
	}

.toggle .box {
	background-color: #fafafa;
	border: 1px solid #dddddd;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 20px;
	}

    Please help! Thank you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s an image in the directory:
    includes/images/toggle.png

    You’ll need to manipulate this image.

    Thread Starter Adam Blythe

    (@adsleeblythe)

    Ah yes I have already done this see ‘toggle-white.png’: 

    .toggle .active span {
	background: url(includes/images/toggle-white.png) 0 0 no-repeat;
	background-position: 0 -20px;
	}

    If you look at my menu you will see what I mean, I was able to target the toggle menu item’s background image when clicked (active) but I can’t seem to change it on hover!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try the CSS

    .toggle .trigger:hover span{
 background: url(includes/images/toggle-white.png) 0 0 no-repeat;
 background-position: 0 -20px;
}

    Thread Starter Adam Blythe

    (@adsleeblythe)

    Thanks again,

    so nearly there! Now on hover of each item (before mouse down), I need the background image to stay as + icon, then when clicked to open the information inside, I want the – icon to show!

    ahhh this is hard :S

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    use jQuery for that

    jQuery(document).ready(function($) {
 $('.toggle .trigger').click().css('background', url(' + includes/images/toggle-white.png + ')');
});

    Put that in the bottom of your template

    Thread Starter Adam Blythe

    (@adsleeblythe)

    Sorry, I’m afraid I don’t follow!
    The bottom of my template? footer.php?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you want this to repeat on all pages, add it to the footer.php file, just above the </body> element.

    If you want this to apply only to your template, try to find out which template your page is attributed to (on page attributes in admin panel). Then find the file that is that template and plonk this code in the bottom of that file.

    Thread Starter Adam Blythe

    (@adsleeblythe)

    Ahh I see, ok I found the page template and inserted the jQuery above at the bottom of my page but still no luck.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you upload it to the website so I can analyse why it isn’t working?

    Thread Starter Adam Blythe

    (@adsleeblythe)

    Please see the code for my template page ‘print’.

    By inserting the jQuery above, the browser simply printed the jQuery at the bottom of each page with the template ‘print’.

    I appreciate your help on this.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Customising the WordPress Toggle menu [toggle]’ is closed to new replies.