How to make a responsive scrollable navbar-CodePudding

I am trying to make a responsive navbar where part of the items become scrollable when the screen size is reduced. It is something like this:

Large screens:

                                                                                        
   FIXED ITEM                 EMPTY SPACE                 SCROLLABLE ITEM   FIXED ITEM

Small screens:

                                          
| FIXED ITEM | SCROLLABL... | FIXED ITEM |
             .<@@@@>--------.

So far, I have managed to do everything (see here) except the scroll part. Any ideas?

CodePudding user response：

You can force your text to stay on 1 line with the white-space: nowrap property.

#navbar {
  background-color: black;
  color: white;
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.navbar-start {
  margin: 10px;  
}
.navbar-end {
  margin: 10px;
}

.navbar-scrollable {
  background: tomato;
  margin: 10px;

  overflow-x: auto;
  white-space: nowrap;
}

<nav id="navbar">
<div >
FIXED
</div>
<div >
            SCROLLABLE CONTENT            
</div>
<div >
FIXED
</div>
</nav>

CodePudding user response：

body{ font-family: impact; }
    
.header {
    background-color: blue;
    color: white;
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 10px 30px;
}

.logo { 
    
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    width: 80px;
    display: flex;
    border-style: solid;
    border-color: cornflowerblue;
    border-width: 4px;
    border-radius: 8px;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
}

.button:hover{

    color: red;
    background-color: white;

}

.at-right{
    
    font-size: 18px;
    width: 380px;
    height:32px;
    background: rgb(0, 191, 255);
    margin: 10px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: nowrap;
    border-radius: 4px;

}

.scrollnav{ margin: 0 auto; }

.right-side{ display: flex; }

.at-right::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */}

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <nav >
        <div >LOGO</div>

        <div >
        <div >
            
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>
            <div > >>>>>> SCROLLABLE CONTENT <<<<<< </div>

        </div>
        
        <a  href="https://google.com">Google</a>
    </div>

    </nav>

</body>
</html>

just try this example.
and look details for 'hidden scroll bar', 'only y scroll', and 'wrap' etc.