Home Forums WoodMart – Premium Template Menu width on certain devices

This topic contains 8 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 month ago.

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

    dk1
    Customer

    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.

    Private Content Hidden
    #198762

    Hello,

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

    Best Regards

    #198868

    dk1
    Customer

    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.

    #198913

    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

    #199693

    dk1
    Customer

    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).

    #199694

    dk1
    Customer

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

    #199940

    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

    #199997

    dk1
    Customer

    At first look it appears to be working. Thanks!

    #200052

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

    Best Regards

Viewing 9 posts - 1 through 9 (of 9 total)

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