Different colours per each menu item & a line / symbol on active menu item

pending (30 posts) (3 voices)

  1. Hiya do you have any documentation for:

    Having each active menu item a different color, i.e home active is blue, about is green, when active?

    I know that in fusion that i would be able to make the active colour box smaller to make the line for active state, but i would like to know in general if i wanted to place an icon on active menu item, how would i do that? Do you have any resources of has anyone asked before?

    Alternately a plugin in resource that you know that has worked before fro creating menu's like what i have described?

    Posted 4 years ago #
  2. Elliott

    Hello Faste99,

    You can use CSS to target each menu ID. Send us a link.

    Posted 4 years ago #
  3. Thanks, I will come to you when i have a link, I have design that has been presented to me, and I wanted to know before I committed to saying yes. Thanks, I will be back with this early next week.

    Posted 4 years ago #
  4. Ok, then!

    Let us know if you need anything else in the meantime.


    Posted 4 years ago #
  5. Oh my hat... after much coding an attempts i now give up ;)
    I dont understand, i got the coding instantly and it works, but then it is just epic fail, i tried to plug this in:
    .jqueryslidemenu>ul>li>a:hover,.jqueryslidemenu>ul>li:hover>a{background:url(images/nav_image.png) center 34px no-repeat;color:#888;}
    i many was through custom css, but it was a fail, not really sure why

    I have now done this:
    .jqueryslidemenu a:hover {border-bottom: 3px solid rgb(153, 153, 153); padding-bottom: 50px;}

    and this to remove arrow in nav
    .jqueryslidemenu a, .jqueryslidemenu a:hover {background: none !important; }

    i cannot get active page to have a line, i tried:
    .jqueryslidemenu a {border-bottom: 3px solid rgb(153, 153, 153); padding-bottom: 50px;}
    .jqueryslidemenu a.active {border-bottom: 3px solid rgb(153, 153, 153); padding-bottom: 50px;}

    Can you help me with that please?

    Posted 4 years ago #
  6. Elliott

    Send us a link and take a screenshot highlighting exactly what your trying to do.

    Posted 4 years ago #
  7. oh sorry well now i feel blonde, take a look here: http://creatingspaces.brandingco.co.za/?page_id=11
    you can see that on mouse roll over i have the bar at the bottom, but on active state i cannot get it to stay active or if i try use my code above it dies. I am going to move the position when i have the header height sorted.
    I can coed it into the css, and it will work, but i would prefer to place it in custom code so i do not have to worry if i over wrote anything.

    Posted 4 years ago #
  8. Elliott

    Add this to your custom CSS,

    .page-item-11 a:hover span {
        color:  red !important;

    And then hover over your "colors" menu link. Is this what your trying to do?

    Posted 4 years ago #
  9. Hiya Sorry I see the styling just dissapeared ;( Sorry my bar is back again, but only on roll over
    see attached image, thanks

    I am trying to get the bar line under the nav there on active page, and the active page blue.


    1. Untitled-2.jpg (50.5 KB, 0 downloads) 4 years old
    Posted 4 years ago #
  10. Elliott

    The link you provided doesn't look anything like your screenshot. Is that a different site?

    Posted 4 years ago #
  11. Yea it is what my client is wanting me to replicate after 2 other developer have let he down and she whats it just like that.

    Another thing on this same site, i have made myself a folder for images so that do not get over written with style sheet as i have to move the site once i get the domain.
    I am trying to change the shadow in the top part of the footer, my code would be this:
    #footer {background-image: url("../images/creating_spaces/footer_shadowcs.png"); background-color: transparent; background-repeat: repeat-x; background-attachment: scroll; background-position: center top; }

    i just want this:
    #footer {background-image: url("../images/creating_spaces/footer_shadowcs.png")} but it does not pull through. Can you tell me what i am doing wrong?

    Posted 4 years ago #
  12. Elliott

    You'll want to use absolute path to the image.

    You can use this CSS to add the line background,

    .jqueryslidemenu > ul > li:hover { background: url("URL to your image") !important; }

    Posted 4 years ago #
  13. ok now i know what i did wrong, i was clearly trying to cheat the system, so that when i moved the site the link would not break ;)
    Ok almost there, i have roll over and it is working the only problem is the active page, if i try do active page i get them all to have lines under them??
    .jqueryslidemenu > ul > li > a:hover, .jqueryslidemenu > ul > li:hover > a, .jqueryslidemenu a { background: url("http://www.creatingspaces.brandingco.co.za/theme_images/nav_image.png") repeat-x scroll center 103px transparent; color: rgb(29, 111, 183) !important; }

    this is what i added in to try make active page have a line: jqueryslidemenu a

    Posted 4 years ago #
  14. Elliott

    You can target the active page like so,

    .current_page_item a, .current-menu-item a { }

    Posted 4 years ago #
  15. Thanks what a legend u are!!

    Posted 4 years ago #
  16. Hiya my twitter is not working, places the twitter username under the front page
    what am i doing wrong?

    Posted 4 years ago #
  17. Oh and my home page my twitter is invisible, I have not does nay coding on that, but the other pages you can see the place holder with the shadow.

    Posted 4 years ago #
  18. Elliott

    Send us a link to where your using it and paste the code here.

    Posted 4 years ago #
  19. Ok my twitter just started to appear on all pages but the HOME, why is that?

    Can you tell me why my portfolio page
    the last block is empty and the "next" pages don't work they say error not found?? I have never had these problems before!! I have never used this template before, but this all seems soo odd.

    Also i placed an image in the "body Background" under the theme i am on i saw it for 1s, and now it is no where, it is a png, any clue what is going on?

    Posted 4 years ago #
  20. There is something seriously wrong here, with the portfolio and the short code!! I took the 3 column code from your site and it shows up as 4, and there is weird coding coming through.

    I cant get back to 3 columns of 9 images on a page, with pagination working... help help im going live in a few hours *cry*

    Posted 4 years ago #
  21. Elliott

    Send us a link to the exact page.

    And twitter appears to be working fine on all pages, clear your browser cache.

    Posted 4 years ago #
  22. Elliott

    Switch to the HTML editor of that page and paste all of the code here.

    Posted 4 years ago #
  23. Hiya, I custom css'd the "glow" or image into the background, it refused to use my image in the theme options, this theme and or template is not working as well as others i have used, it is my first time using this one.

    I am busy uploading another copy of the theme and re-loading it to see if the portfolio issue resolves itself.

    Posted 4 years ago #
  24. Tried reloading, it did not work, i did get my portfolio back to the previous inccorect state, missing pic no 9 on the page, and the pagnition will not work.

    Posted 4 years ago #
  25. Elliott

    Rename your portfolio page permalink to something else besides /portfolio/.

    Posted 4 years ago #
  26. Hiya i have two portfolio pages i am playing with both throw out the same thing, this one was portfolio2 i chnaged it to gallery:

    Posted 4 years ago #
  27. Elliott

    It's stopping on "La Luca Bathroom" and on page two you have two posts with that name as well. Try deleting that post to see if it's what is causing the problem.

    Paste the code your using here.

    Posted 4 years ago #
  28. Made every post have a different name by adding a number, made no difference, I looked at the post that is not showing up deleted feature image and re-set it back and saved it, that did not help
    I also changed all the time so that each post has a different time, and it cannot get confused, that did not change anything.

    if i replace the code to say show 10 it shows 9 images, dont know why but it does, but pagnition does not work.

    [portfolio_grid column="3" showposts="9" disable="title,excerpt,date,more,visit"]

    it has stopped doing the funny html coding where it said abit of your short codea bit of your short code ECT


    Posted 4 years ago #
  29. Elliott

    Your pagination is working fine for me. If your wanting both of those shortcodes to paginate separately then you'll need to put them on different pages.

    Posted 4 years ago #


You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme