Jump to content
Sign in to follow this  
MissT

Styling parts of a menu item to be different on active and hover.

Recommended Posts

MissT

I have a main menu in a Pagelines Framework site I'm building that I need to style the different parts of each menu item differently on hover and when its an active page. The menu is... Home About Renaissance Our Collections Our Brochure Contact Us I need... About, Our, Our, Contact to be #7b8289 Renaissance, Collections, Brochure and Us to be #bdc0c4 On hover and when the page is the active/current page I need... About, Our, Our, Contact to change to #bdc0c4 Renaissance, Collections, Brochure and Us to change to #ffffff I'm using the following code in the titles of the custom menu: About Renaissance And this is the CSS: .menutitle {color: #7b8289;} .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background-color: #222e3b; border-bottom:1px solid #ffffff; color: #ffffff; font-weight: 500;} ul.main-nav a:hover {background-color: transparent; border-bottom:1px solid #ffffff; color: #ffffff !important; font-weight: 500 !important;} This works apart from on hover and active/current page I can't seem to get About, Our, Our, Contact to change to #bdc0c4. Is there some CSS I can add to get this to work or perhaps there is a better way of doing this? The site has restricted access as its in its live environment but not ready to go live yet, I can give access for an IP address if needed though. Any help much appreaciated as always! :) Tracy.

Share this post


Link to post
Share on other sites
Danny
Hi Tracy, Each menu item is given a unique ID (view image) http://www.screencast.com/t/2p5NCzjP Therefore, you can use these unique ID's to do what you want for example, lets use the Renaissance menu item, which has a unique ID of menu-item-1031 [code]#menu-item-1031 .main-nav li.current_page_item a, #menu-item-1031 .main-nav li.current-menu-item a, #menu-item-1031.sf-menu li li, .sf-menu li li li { CSS goes here...!}[/code] Hope this helps!

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
MissT
Thanks Danny but that is not the site or menu I'm referring to, you are being redirected to the parent company website by the 'under construction' plugin I'm using till the site is ready to go live. Here is a screen shot of the site I'm working on http://www.simondesign.co.uk/images/test/renaissance-screenshot.jpg As mentioned before I can give access by IP address if needed. How can I style the first part of each menu item eg 'About' or 'Our' to change to a different colour on hover or active? Cheers, Tracy.

Share this post


Link to post
Share on other sites
Jenny
Hi Tracy. You can try to use Simple CSS Lite and see if you can get it how you want it. (See my signature below for the link) Outside of that though, you will have to custom code the menu with CSS. Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug for Firefox[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] for more info. Also please be sure to watch our Firebug video tutorial [url="http://www.pagelines.com/wiki/Custom_CSS"]here[/url]. If your site requires customization, you may wish to consider requesting a quote from one of our authorized Professional designers by visiting [url="http://www.pagelines.com/pros/"]our Pros page[/url]. Common CSS Tweaks http://www.pagelines.com/forum/discussion/15956/pagelines-framework-2.0-css-tweaks.#Item_1 http://www.pagelines.com/forum/discussion/16222/common-questions-and-customizations#Item_2

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
beardedavenger
Hi Tracy! Danny's answer was right on the mark. Each menu will provide a dynamic class so that you can style them. You can see this class under

  • Something big is coming for DMS + photographers.

    http://fotostheme.com

     

    Nick Haskins & CO - New home for all of my PageLines Store products! 

    http://nickhaskins.co

     

    Better DMS - News, Tutorials, and Tips

    http://betterdms.com

     

    Share this post


    Link to post
    Share on other sites
    MissT
    Thanks for the input guys, I'm using Firebug already and have already coded some CSS using Pagelines Customise plugin to get this to work - its just one part of it I can't get right. And I've already looked at W3schools and searched the web without much luck on how to do this hence my last resort to ask for help here as I know its a CSS issue rather than a Pagelines issue. I'm not sure if its perhaps hard for you to see what I've already done and what I actually need help with as access to the site is restricted till it goes live or if I'm just not getting what you're saying... Won't the dynamic class Danny and Nick have refered to just style the whole menu link? Or will I be able to use that in conjunction with my existing class 'menutitle' which is just for the first word of each of the menu titles? Eg) Menu option ' About Renaissance' I need the first word of the menu styling on hover and active - 'About' to be one color and at the same time the second part of the menu option 'Renaissance' to be a different color on hover / active. Cheers folks :)

    Share this post


    Link to post
    Share on other sites
    Rob
    Tracy, did you wake up today and say "I think I'll make rangelone's day miserable"? I've not tested this, but I think to do what you're proposing, you'd need to apply various classes to each word. Something like [code]
    About
    Renaissance
    [/code] then apply the CSS to those classes. You could, in theory, turn your entire menu into a rainbow of colors that way, so that each menu item changes differently in active, hover or visited states. But if it works, ya owe me dinner.

    Former PageLines Moderator, Food Expert and Raconteur

    Share this post


    Link to post
    Share on other sites
    MissT
    LOL Rangelone! Apologies for making you miserable, you can be happy now though it's sorted :) It wasn't my idea to do this by the way - the graphic designers idea. Thanks so much for your help, I tried what you suggested this morning but it didn't work sadly - but you did spur me on to try one last thing which did actually work. I found this which I think explains why previous attempts hadn't worked: http://stackoverflow.com/questions/9052827/styling-different-parts-of-the-same-link So for anyone else that ever has to do this... [b]Here is an eg of the menu navigation label:[/b] About Renaissance [b]Here is the CSS:[/b] .main-nav a {background-color: transparent; color: #bdc0c4;} .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .sf-menu li li, .sf-menu li li li { background-color: transparent; border-bottom:1px solid #ffffff; color: #ffffff; font-weight: 500;} .main-nav li.current_page_item a > span, .main-nav li.current-menu-item a > span, .sf-menu li li, .sf-menu li li li { background-color: transparent; color: #bdc0c4; font-weight: 500;} ul.main-nav a {color: #bdc0c4;} .main-nav a > span {color: #7b8289; font-style:italic; padding-right:2px;} .main-nav .menu-home a {color: #7b8289;} ul.main-nav a:hover {color: #ffffff; background-color: transparent; border-bottom:1px solid #ffffff;} .main-nav a:hover > span {color: #bdc0c4; background-color: transparent;} Thanks to all for support / help, greatly appreciated! Tracy.

    Share this post


    Link to post
    Share on other sites
    Rob
    Sorry my solution didn't work but most glad I inspired you to find a solution! :-)

    Former PageLines Moderator, Food Expert and Raconteur

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    Sign in to follow this  

    ×