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.