How to customize Header font sizes

Main Header Area

To customize Main Header Area font size (including the menu, links, buttons and default text), you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.navbar-nav.nav-style-megamenu > li > a > span, .navbar a.text-sm i, .navbar a.text-sm, .navbar .text-sm a i, .navbar .text-sm a, .navbar .text-18 {
    font-size: 18px !important; 
}

*You can change the 18px to the desired font size.

On Scroll

To customize Main Header Area on scroll (sticky header should be enabled), you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.is-scroll .navbar-nav.nav-style-megamenu > li > a > span, .is-scroll .navbar a.text-sm i, .is-scroll .navbar a.text-sm, .is-scroll .navbar .text-sm a i, .is-scroll .navbar .text-sm a, .is-scroll .navbar .text-18 {
    font-size: 14px !important; 
}

*You can change the 14px to the desired font size.

Menu

To customize Menu text in the Main header area, you can change the font size by adding this code snippet into Theme options > Layout > Advanced > Custom css:

.navbar-nav.nav-style-megamenu > li > a > span {
     font-size: 12px !important;
}

*You can change the 12px to the desired font size.

On Scroll

To customize Menu text on scroll (sticky header should be enabled), you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.is-scroll .navbar-nav.nav-style-megamenu > li > a > span {
     font-size: 16px !important;
}

*You can change the 16px to the desired font size.

Dropdown

To change all the dropdown links font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.nav-style-megamenu>li.nav-item .dropdown-menu a,
.nav-style-megamenu>li.nav-item .dropdown-menu .mega-col-title {
     font-size: 16px !important;
}

*You can change the 16px to the desired font size.

To change the dropdown titles links font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.nav-style-megamenu>li.nav-item .dropdown-menu .mega-col-title {
     font-size: 16px !important;
}

*You can change the 16px to the desired font size.

To change the dropdown normal links font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.nav-style-megamenu>li.nav-item .dropdown-menu a {
     font-size: 16px !important;
}

*You can change the 16px to the desired font size.

Topbar area

To customize the Topbar texts and icons font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.pix-topbar .text-sm i, .pix-topbar .pix-header-text, .pix-topbar .text-18 {
    font-size: 18px !important;
}

*You can change the 18px to the desired font size.

Mobile

To customize Mobile menu main items links font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.pix-header-mobile nav .pix-dropdown-title {
    font-size: 16px !important;
}

*You can change the 16px to the desired font size.

To customize the nested Mobile menu items links font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.pix-header-mobile nav .dropdown-menu .pix-dropdown-title {
    font-size: 16px !important;
}

*You can change the 16px to the desired font size.

To customize the Mobile menu columns Label font size you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.pix-header-mobile nav .mega-col-title {
    font-size: 16px !important;
}

*You can change the 16px to the desired font size.

pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts