Joomla Templates Club 406,261 posts

[Alp Friend AlpJoin date: November 2015Posts: 145Downloads:396Uploads:12 Thanks: 10 Thanked: 2 times in 2 posts]

#973570

Hello,

is it possible to get main menu to display only icons on big screen sizes as well as it is on mobile screens?

Another question is; how can I change the width of the main menu if I want it to get displayed vertically?

Tnx a lot for your help and best regards

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#973638

Hi
yes, you can show only icons , this needs customization in te style code . In smaller view text is hidden because it does not have space to adjust it .
For the width, you have to increase the width from CSS class : http://prntscr.com/cpym6w
You can do this to a limit because there is not enough space to show it over the content .

[Alp Friend AlpJoin date: November 2015Posts: 145Downloads:396Uploads:12 Thanks: 10 Thanked: 2 times in 2 posts]

#973749

Ok tnx,

I reduced the width of the menu in vertical position to 130px.

Problem its that there is still too much space between main body and the vertical menu.

http://prntscr.com/cq7zjk

Therefore I tried following code:

.t3-mainbody {
    padding-top: 0px!important;
    padding-left: 130px!important;
}

Then on large screens main body is getting closer to left. Problem is that padding left still exists on smaller screens (mobile, tablet). If I use the code without "!important" like

.t3-mainbody {
    padding-top: 0px!important;
    padding-left: 130px;
}

then main body is coming closer to left on small screens but the space on large screen keeps existing though I disabled sidebar1 position.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#973920

Hi
This space comes because the vertical sidebar width is reduced . Container already using the max. width of it .
You have to use below code to reduce padding

@media (min-width: 992px) {
div.t3-wrapper.layout-vertical .t3-mainbody.container {
    padding-left: 260px;
}}

and this code

div.t3-wrapper.layout-vertical.navbar-hidden .container.t3-mainbody {
    padding-left: 50px;
} 

[Author]

Posts