X-Cart forums

[gcrawford]

I am currently working on a site using X-Cart 5's Noblesse template.

My issue is that I have some rather long words in the menu, and would like to modify the text size in order for the menu to fit on one line (or perhaps make it a side menu).

Any idea where I can do that?

[razortw]

Originally Posted by gcrawford

I am currently working on a site using X-Cart 5's Noblesse template.

My issue is that I have some rather long words in the menu, and would like to modify the text size in order for the menu to fit on one line (or perhaps make it a side menu).

Any idea where I can do that?

Hi.
You can do that using CSS by adding the respective code to the 'Look & Feel' > 'Custom CSS' section in your admin area.

[gcrawford]

Thank you for your quick reply. I found the CSS to edit from your post, but putting in the font size didn't change anything. Here's the code - I added "font-sizex-small" in 3 locations, and none of them made any difference:

/**
* Top menu main block styling
*/
.navbar-inverse {
background-color: #44596f;
border-color: #44596f;
font-sizex-small;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: #44596f;
font-sizex-small;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #44596f;
font-sizex-small;
}

/**

[gcrawford]

Thanks for the reply, Igor.

I went into the "Custom CSS" area and tried to change the font size of the menu, but it didn't work. Any idea why? I added the "font-sizex-small" in all 3 locations below. Here's the code:

/**
* Top menu main block styling
*/
.navbar-inverse {
background-color: #44596f;
border-color: #44596f;
font-sizex-small;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: #44596f;
font-sizex-small;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #44596f;
font-sizex-small;
}

/**