Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 25, 2015 at 1:55 am #478504
    Jagrav

    I would like to make the active link in the top alternate menu bar bold. Can you help me with this?

    July 25, 2015 at 8:47 am #478595
    Rikard

    Hi Jagrav!

    Do you mean when hovering the link or when you are on the actual page?

    Cheers!
    Rikard

    July 25, 2015 at 11:28 pm #478699
    Jagrav

    I actually changed the bold idea to a slight change of font colors. I made all the non current site links a light shade of whitish purple. I would like the current site link and hover to be white (for contrast). I still would like the original hover underline.

    July 27, 2015 at 8:31 am #478934
    Rikard

    Hi!

    Not sure white would be such a good idea since that is your background colour, but you can target the active item by using the following CSS:

    #avia-menu .current_page_item .avia-menu-text {
    color: red !important;
}

    Cheers!
    Rikard

    July 27, 2015 at 11:17 pm #479333
    Jagrav

    Hi Rikard,

    It’s the secondary menu in the bar that I’m talking about. Your above css is for the main menu. Please see website link in previous private thread for a visual.

    July 28, 2015 at 12:02 am #479352
    Yigit

    Hi!

    Please add following code to Quick CSS 

    .sub_menu>ul>li>a, .sub_menu>div>ul>li>a {
    font-weight: normal;
}
.sub_menu li.current-menu-item > a {
    font-weight: bold;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field

    Cheers!
    Yigit

    July 28, 2015 at 1:39 am #479400
    Jagrav

    This is getting a little confusing :)

    I’m trying to work more from the enfold user interface in the Enfold Child. Rather than making all my changes in Quick CSS.

    What I’m working with in this example is the top (secondary) menu bar that has a purple background. This is where I set part of the styling >
    –
    WP Admin: Enfold Child > Advanced Settings
    [] Small bar above Main Menu
    Change the styling for the small bar above the main menu which can contain social icons, a second menu and a phone number
    Font Color: #f7e8f7 (light purple)
    Background Color: #9c27b0 (purple)
    Border Color: Default
    –
    So, the top menu has a purple background color and all the menu links are a very light purple. I would like the “current site link and hover” to be white (for contrast). I still would like the original hover underline. In this case I’m trying to see if the color white will contrast enough for visitors to know they’re on this page. If not, my second choice is to try bold.

    July 28, 2015 at 3:11 pm #479746
    Yigit

    Hi!

    Changes you would like to make are possible using custom CSS.
    Please add following code to Quick CSS as well

    .sub_menu li.current-menu-item > a,.sub_menu a:hover {
    color: white!important;
}

    Best regards,
    Yigit

    July 30, 2015 at 8:58 pm #480941
    Jagrav

    Thank you both for the help. It’s working!
    I ended up using a combination of Enfold Child Theme settings and QuickCSS:

    [] WP: Enfold Child > Advanced Styling
    Small bar above Main Menu
    Font Color:
    Background Color: #9c27b0
    Border Color:

    [] Quick CSS:

    /*  * Start top header bar *  */
/* Regular menu links */
.header_color .sub_menu>ul>li>a {
	color: #f7e8f7;
}
/* Current page menu link */
.sub_menu li.current-menu-item > a,.sub_menu a:hover {
	color: white!important;
}
/* * End Top header bar * */
  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Top bar alternate menu active link’ is closed to new replies.