Home › Forums › WoodMart support forum › Menu width on certain devices

Menu width on certain devices

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 28, 2020 at 6:28 pm #198733

    dk1
    Participant

    There is a set of PC monitors, particulary 13′, too big for mobile version of my site and also too small for PC version. As a result main menu goes bonkers. I am attaching screenshot in private section.

    How can I make my menu not breakable (by enabling horizontal scroll, for example, or other option)?

    Thanks.

    May 28, 2020 at 9:18 pm #198762

    Elise Noromit
    Member

    Hello,

    In this case, leave one row for menu and I can reduce paddings between items with custom CSS

    Best Regards

    May 29, 2020 at 8:21 am #198868

    dk1
    Participant

    Elise,

    pagins = paddings?

    It is not an option for us to modify header in a way that separates menus in several rows, as is it will make it a) ugly b) bloated.

    Any other way to do this?

    Much appreciated.

    May 29, 2020 at 11:21 am #198913

    Elise Noromit
    Member

    Hello,

    There is no space enough. Your menu has a certain length and our theme does not have any options to add the width to the screen. We can try to reduce the paddings on the certain width. Please tell me the width diapason where you have the problem, I will provide custom CSS.

    Best Regards

    June 1, 2020 at 1:03 pm #199693

    dk1
    Participant

    Hi,

    width diapason:

    for top top menu on the screenshot: from 1025px to 1195px
    for top menu on the screenshot: from 1025px to 1245px.

    I thought about other way to do it: is it possible to toggle tablet view with mobile menu sooner? From 1245px and less, for example (not 1024 and less like it is done now).

    June 1, 2020 at 1:04 pm #199694

    dk1
    Participant

    That being said, lets first try method that you proposed (reduced paddings for certain width).

    June 2, 2020 at 10:41 am #199940

    Elise Noromit
    Member

    Hello,

    I have tried different variants and this one works the best, please check: 

    @media only screen and (max-width: 1260px){
body .whb-color-dark .navigation-style-default .item-level-0>a {
  font-size:12px;
	padding-left:3px;
	padding-right:3px;
}
body .inline-list-with-border li {
    padding-left: 3px;
    padding-right: 3px;
	font-size:12px;
}
}
@media only screen and (max-width: 1090px){
body .whb-color-dark .navigation-style-default .item-level-0>a {
  font-size:10px;
}
body .inline-list-with-border li {
	font-size:10px;
}
}

    I have to reduce the font size considerably as there is no space. That is why I have created two steps styles: 1st I reduced paddings a bit and font-size for one point, the second: both paddings and font-size

    Best Regards

    June 2, 2020 at 2:22 pm #199997

    dk1
    Participant

    At first look it appears to be working. Thanks!

    June 2, 2020 at 7:15 pm #200052

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Menu width on certain devices’ is closed to new replies.