CODEWITHSUNDEEP
javascripthtmlcss
Berisko
Berisko

Reputation: 643

To responsive horizontal, scrolling navigation bar

I'm having trouble with responsive menu. I'm trying to create horizontal scrolling menu on screen change (responsive).

This is how menu looks on pc screen (full width): enter image description here

This is how menu looks on mobile device screen: enter image description here

I need the bar to scroll right, without those Scrollbars. Is there a way to do this?

<div class="menu">
    <nav class="infobar">
        <div class="container">
            <ul class="nav navbar-left">
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
                <div class="col-min">
                    <p>Example</p>
                </div>
            </ul>
        </div>
    </nav>
</div>

MAIN CSS

.infobar {
 width: 100%;
 background: #f7f7f7;
 height: 80px;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
border-radius: 0;

.col-min {
    min-width: 10px;
    height: 80px;
    background: none;
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    position: relative;
    margin-left: -1px;
    top: -1px;
    left: 1px;
    float: left;
}

MOBILE CSS

.infobar {
    min-width:100%;
    overflow-x:scroll;
    overflow-y:hide;    
}

.menu .nav {
    margin-left: -5px;
    min-width: 100%;
}

https://jsfiddle.net/94f1d5v5/

https://jsfiddle.net/94f1d5v5/1/

Upvotes: 0

Views: 1448

Answers (2)

Alex Shtorov
Alex Shtorov

Reputation: 236

Use perfect-scroll for auto-hiding scrollbar and display: flex for better experience.

.nav {
   display: flex;
   padding: 24px
}

I make small refactoring playcode.io/8

Upvotes: 1

user2490157
user2490157

Reputation:

use

overflow-y: hidden

instead of

overflow-y: hide

and as for stylizing the scrollbars, you can use the following classes:

::-webkit-scrollbar              {}
::-webkit-scrollbar-button       {}
::-webkit-scrollbar-track        {}
::-webkit-scrollbar-track-piece  {}
::-webkit-scrollbar-thumb        {}
::-webkit-scrollbar-corner       {}
::-webkit-resizer                {}

More info here

Upvotes: 0

Related Questions