Want to split menu with logo centered and overlapping slider

resolved (12 posts) (2 voices)

  1. Julia

    I have 10 menu items and would like to have 5 on the left and 5 on the right with the logo in the center and slightly overlapping the Nivo slider. I would also like for the menu items to be red on hover, or when you are on that page. I have searched support, and tried several things, but with no success.
    I would greatly appreciate any help with this. Attached is a mock up of the desired effect.
    The url for my site is http://www.lindleydesign.com/testsite/


    1. TABLA_HomePage.jpg (136.1 KB, 4 downloads) 3 years old
    Posted 3 years ago #
  2. Elliott

    Hello Julia,

    You can add this to your CSS to create a space,

    #menu-item-35 {
        padding-right: 100px;

    But there are too many links in your menu so not enough space.

    Posted 3 years ago #
  3. Julia

    Thanks very much! That turned out to be a very simple solution. I just made the font slightly smaller so that it would all fit. I still haven't found a way to drop the logo so that it has an overlap on the homepage slider.
    Attached is a file with the desired look.
    my url is http://tablasantafe.com/betasite/


    1. TABLA_HomePage.jpg (136.1 KB, 0 downloads) 3 years old
    Posted 3 years ago #
  4. Elliott

    See here for moving the header elements around, http://mysitemyway.com/docs/index.php/Customizing_the_Header.

    Posted 3 years ago #
  5. Julia

    Thank you - you have been extremely helpful. I have another question with something that should be very simple. I want to change the color of the menu items in my main nav on hover & active. I see that this has been addressed in support & have searched & tried all sorts of things but with no success.
    link to my site is http://tablasantafe.com/betasite/

    thank you again very much for your help!

    Posted 3 years ago #
  6. Elliott

    Add this to your custom CSS,

    #primary_menu a { color: red !important; }
    #primary_menu a:hover { color: blue !important; }
    Posted 3 years ago #
  7. Julia

    thanks, but unfortunately that had no effect

    Posted 3 years ago #
  8. Julia

    I found a solution after re-reading previous support cases.

    In the custom javascript I added -

    jQuery('.jqueryslidemenu a').hover(function(){
    Cufon.replace(this, { color: '#971724' });
    }, function(){
    Cufon.replace(this, { color: '#000' });

    I would still love to know if there is a way I can have the menu stay the red hover state color while someone is currently visiting that page. Any input would be greatly appreciated!

    thank you!

    Posted 3 years ago #
  9. Elliott

    Add this beneath that code,

    Cufon.replace('.current-menu-item a span', { color: '#971724' });

    Posted 3 years ago #
  10. Julia

    Thanks very much! That did it. Slight problem if you hover back over the current menu item though, because it goes back to black. If you know of a fix that's great, but if not, I think we can live with that problem.

    I guess that javascript code overrides any changes I make to that font now in the skin. I was just trying to make the menu items bold. Any thoughts? my link is http://tablasantafe.com/betasite/

    thanks again for all of the help!

    Posted 3 years ago #
  11. Julia

    I'm still wondering about the first part of my question, but never mind about the skin part - I have custom css over riding that - sorry I didn't realize that first.

    Posted 3 years ago #
  12. Julia

    Changed the font in the menu, and have resolved this problem.


    Posted 3 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