Home › Forums › Basel support forum › Making menu horizontal scrollable

Making menu horizontal scrollable

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 5, 2018 at 11:00 am #50969

    deesharma16
    Participant

    Hi,
    I wanted to make my menu horizontally scrollable. For that i used the following code.
    <!DOCTYPE html>
    <html>
    <head>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <style>
    div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    }

    div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    }

    div.scrollmenu a:hover {
    background-color: #777;
    }
    </style>
    </head>
    <body>

    <div class=”scrollmenu”>
    Home
    News
    Contact
    About
    Support
    Blog
    Tools
    Base
    Custom
    More
    Logo
    Friends
    Partners
    People
    Work
    </div>

    <h2>Horizontal Scrollable Menu</h2>
    <p>Resize the browser window to see the effect.</p>

    </body>
    </html>

    I made certain changes here and now it appears horizontal but the menu is gone from mobile view. It doesn’t display menu. so how to make it responsive?

    April 5, 2018 at 12:01 pm #50981

    Elise Noromit
    Member

    Hello,

    You would better not to touch code of the theme. You will have errors.
    If you want to make your menu to scroll, 1/ assign max-width to the container and overflow-x: scroll, put this code into Theme settings > Custom CSS > Desktop.

    Best Regards

    April 5, 2018 at 12:20 pm #50988

    deesharma16
    Participant

    Hi,
    I have changed the code with yours.
    Its not working.

    here is the link:
    https://omsaiexpresso.com/shop/?v=c86ee0d9d7ed

    We want it to work on both desktop and mobile view.

    April 5, 2018 at 4:00 pm #51041

    Elise Noromit
    Member

    Hello,

    Will you provide a screen where you have added the menu? How did you add it?

    Best Regards

    April 6, 2018 at 11:43 am #51218

    deesharma16
    Participant

    Hi,
    The link provided above is the screen where the menu is added.
    https://omsaiexpresso.com/shop/?v=c86ee0d9d7ed

    The following piece of code was added to custom css for the same

    PFA

    Attachments:
    You must be logged in to view attached files.
    April 6, 2018 at 11:44 am #51220

    deesharma16
    Participant

    Hi,
    Also how do i make the menu scrollable for mobile view aswell.

    Thanks

    April 6, 2018 at 1:55 pm #51269

    Elise Noromit
    Member

    Hello,

    Do you mean this menu http://prntscr.com/j1qx61 ?

    How did you add it?

    It tries to become drop-down but not workable on mobile. Do you use a plugin or customization for that?

    The CSS code you generated is wrong.

    1/ Please advise which menu you want to scroll, and provide admin access so that I could see which way did you displayed it by.

    Best Regards

    April 6, 2018 at 4:51 pm #51294

    deesharma16
    Participant

    Hi,
    “http://prntscr.com/j1qx61&#8221; Yes this is the menu which we want scroll-able. This are the Categories which is displayed default by woocommerce on shop page and there is no use of any plugin for it.
    We just used the above shown CSS code to make it scroll-able. Now since you said that the generated code is Wrong,so can you help validate it?

    I am providing you with the admin access so that you can go through it.

    April 6, 2018 at 11:09 pm #51334

    Artem Temos
    Keymaster

    Sorry, but we don’t have an option to make this menu scrollable. Your code seems to be incorrect but we don’t have any other instruction for this. Additional code customization is out of our theme support scope.

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