wrong links in menu change colour

  • Unknown's avatar
    joewegecsanyi · Member ·

    Hi,

    I am working on a blog for my podcast. The menu has 2 links, one which says “archive”, one which says “contact”.

    When I hover my mouse of the “archive” link, the “contact” one lights up, and vice versa.

    Also, I would love to have these links aligned in the center.

    Thanks for any help and sorry if I’ve posted this in the wrong section, I am new to all of this!

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi there!

    On your current theme, Blaskan, the entire menu changes to a lighter color when you hover over it – then the item specific item you’re hovering on changes to a darker one – the effect works better on menus with more than two links (the demo site has a good example of this in action).

    Adding a ‘Home’ link so there are three items instead of two might help it not seem like the wrong item is lighting up :)

    If you have access to your site’s Custom CSS (as with a Premium Plan or Business Plan) you can open My Site > Customize and add this snippet to change the highlighting behavior:

    /* Prevent full menu color opacity on hover */
#nav .menu>ul:hover>li {
	opacity: 1;
}
/* Make the highlighted item stand out a bit more*/
#nav li:hover>a {
    background: #000;
    background: -moz-linear-gradient(top,#888,#000);
    background: -o-linear-gradient(top,#888,#000);
    background: -webkit-gradient(linear,left top,left bottom,from(#888),to(#000));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',endColorstr='#000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#888888, endColorstr=#000000)";
}

    The second, larger style lightens the background when hovering over a specific link. Without the full menu color change, the previous effect didn’t stand out much.

    To center the menu, you can use the following CSS:

    #nav .menu {
	text-align: center;
}

#nav ul {
  display: inline-block;	
}

    Let me know how it looks!

  • Unknown's avatar
    joewegecsanyi · Member ·

    Chad1008, thanks so much for your help, you solved the highlighting issue perfectly, which I would never have been able to do myself. I really appreciate it!

    I tried your advice for the centering, but unfortunately now it makes it look very strange on mobile (the t of contact drops to a lower line).

  • Unknown's avatar
    joewegecsanyi · Member ·

    I’ve decided it looks ok on the left anyway, so no need for anymore help. Thanks again.

  • staff-loquaciousloon · Staff ·

    Glad it helped!

    The menu now drops down to a nice grid of buttons for me on mobile, even when centered).

    If you’d like, you could always wrap the centering styles in a media query to prevent them from affecting mobile devices:

    @media screen and (min-width: 1068px) {
#nav .menu {
	text-align: center;
}

#nav ul {
  display: inline-block;	
}
}

    Let me know if I can be of any more help!

  • The topic ‘wrong links in menu change colour’ is closed to new replies.