Skip to main content

Make main menu and mobile bold on hover rollover and active

Make sure the Google Font sizes have been loaded into Style / Google Fonts Variants

load google font variants

/* 1. Main menu - active menu item bold without jumping*/
.uk-navbar-nav > li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 2. Main menu - hover menu item bold without jumping*/
.uk-navbar-nav > li:hover > a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 3. Main menu Drop down sub menu - active menu item bold without jumping*/
.uk-navbar-dropdown-nav>li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 4. Main menu Drop down sub menu - hover menu item bold without jumping*/
.uk-navbar-dropdown-nav> li:hover > a {
font-weight: 700;
letter-spacing: 0.7px;
}

/* 5. Mobile menu - active menu item bold without jumping*/
.uk-nav-default> li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 6. Mobile menu - hover menu item bold without jumping*/
.uk-nav-default> li:hover > a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 7. Mobile Drop Down Sub menu - active menu item bold without jumping*/
.uk-nav-default .uk-nav-sub li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 8. Mobile Drop Down Sub menu - hover menu item bold without jumping*/
.uk-nav-default .uk-nav-sub li:hover > a {
font-weight: 700;
letter-spacing: 0.4px;
}

  • Hits: 13