How to change the menu front and space

Support
#1

Dear sir,

i am using X Education theme, i would like to change the font of the menu, and make them centralize to look like the same as the logo, how should i do so?

Thank you very much!

#2

I also wants to make the search box disappear. Thank you!

#3

Hi Tianze,

To change the font of the menu items, it depends if you have the Font Manager enabled or not. To check for that, please go to Theme Options > Typography > Enable Font Manager:

If the Font Manager is disabled, if you go to Theme Options > Header > Links – Text > Navbar Font and you should be able to select the font’s available in the list.

If the Font Manager is enabled, you will have to add the fonts in the Font Manager first then you should be able to see the font when you go to *Theme Options > Header > Links – Text > Navbar Font.

To center the text of the navigation items, you can add some custom CSS. Please add this code in X > Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a {
    text-align: center;
}

Hope this helps.

#4

It seems only 3 fonts are avaliable, which are Inherit, Body copy and Headings, we would like the simple Arial font, but cannot found it. Also, where can we not display the search bar?

#5

Hi Tianze,

That means you have the Font Manager enabled so kindly add the fonts in the Font Manager first.

Please refer to the Font Manager KB article I sent previously:

Hope this helps.

#6

Thank you so much! Is there anyway to alien the image into the center? Meaning to centralize the image? Thanks for a ton!

#7

Hello Tianze,

Are you referring to the logo image? To align it to the center, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar-fixed-left .x-brand{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

We would love to know if this has worked for you. Thank you.

#8

Thank you so much! It works for the tablet and desktop, but on the mobile device it seems not working.

#9

Hello Tianze,

The code is for desktops only. To align the image in smaller screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
    .x-navbar-fixed-left .x-brand, .x-navbar-fixed-right .x-brand {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        float: none;
    }

    .masthead-inline .x-btn-navbar {
        margin-top: 0;
        position: absolute;
        right: 0px;
        top: 50px;
    }
}

We would love to know if this has worked for you. Thank you.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.