Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] image between page menu items (http://forum.bytesforall.com/showthread.php?t=20141)

striped aardvark Apr 16, 2013 08:11 AM

[SOLVED] image between page menu items
 
I've been searching through the forum, and can't find any reference to this - is it possible to use an image to separate oage menu items (rather than a pipe or a symbol etc)

many thanks!

Joan

juggledad Apr 16, 2013 11:10 AM

is there a way to do it, sure, there is a way to do everything. Can it be done without making changes to the theme.? I've no idea. It would probably take an hour of playing to figure out. there might even be a plugin that cold do it...

striped aardvark Apr 16, 2013 11:41 AM

turns out you can use img code in the wp native menu now. that's a welcome change. all is well, and thank-you for the reply, juggledad! http://bradensshuttle.ca/demo2013/ (only problem is, it highlights around each of them, just as it does around the menu titles - if you can think of something off the top of your head to make that go away, i'd be grateful!)

best,
joan

lmilesw Apr 16, 2013 12:59 PM

Quote:

Originally Posted by striped aardvark (Post 99469)
if you can think of something off the top of your head to make that go away, i'd be grateful!)

best,
joan

Two things I can think of.
Add image code to each menu item. For instance add image code to the right of the first menu item etc.

Add a class to the anchor menu items. If you don't see a class check box you have to turn it on via Screen Options.
Then use the class with the following CSS.
HTML Code:

.class-name a:hover {
    background: white !important;
}


striped aardvark Apr 16, 2013 01:33 PM

thank-you! i'm trying those.. I didn't even know we could give menu items a class! so I called them anchorhover, and added this code to the inserts :

.class-anchorhover a:hover
{
background: white !important;
}

but it didn't work. damn! I've searched the source, and each anchor also has an id like this.. li id="menu-item-43" .. so with my limited css skills, I thought maybe something like :

li.menu-item-43 a:hover
{
background: white !important;
}

or

#menu-item-43 a:hover {
background: white !important;
}

no luck with either of those.. but i'm fairly certain i'm doing something wrong with that code.

what about some way of making the anchors not links at all? so they don't even qualify for the hover code?

striped aardvark Apr 16, 2013 01:35 PM

hold the phone - my clunky code did the trick! many thanks you guys!!!

lmilesw Apr 16, 2013 01:45 PM

For the class of anchorhover don't add class- before your class name you would use.
HTML Code:

.anchorhover a:hover
{
background: white !important;
}

By using a class you won't have to find the id of each item although that works fine as well.

striped aardvark Apr 16, 2013 02:01 PM

w00t! thank-you so much! I won't forget!


All times are GMT -6. The time now is 05:57 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.