CODEWITHSUNDEEP
htmlcss
Grant9196
Grant9196

Reputation: 139

How to change padding on this navigation bar

I want to change the padding so when the screen becomes too small, the links don't go onto 2 lines but instead the horizontal scroll comes up. Is it possible to do this using just CSS? I don't want to use javascript

<!DOCTYPE html>
<html>
<head>
<style>
.top_menu {
    position:fixed; 
    background: #F5F5F5;
    width:100%; 
    top:0; 
    left:0; 
    height:20px;       /* decide on this at some stage */
    padding: 0;
}

.menu {
    font-family: Verdana, Arial; 
    position:fixed; 
    background: transparent;
    width:100%; 
    top:75px; 
    left:0; 
    height:25px;       /* decide on this at some stage */
    padding: 0;
    text-align:center;
    font-size: 12px;
    font-weight: 600;  /* decide on this at some stage */
    border-bottom: 1px solid #ccc;  /* decide on this at some stage */
    border-top: 1px solid #ccc;  /* decide on this at some stage */
}

.ty-menu__items {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:100%;
    text-align: center;
}

.ty-menu__item {
    display: inline-block;
    padding-right: 2%;
    padding-left: 2%;
    }

a:link, a:visited {
    display: block;
    width: 100%;
    font-weight: light;
    color: #494949;
    background: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 0px;
}

a:hover, a:active {
    padding-bottom:2px;  /* decide on this at some stage */
    background: transparent;
    border-bottom: 3px solid #9B9B9B; /* decide on this at some stage */
    color: #9B9B9B; /* decide on this at some stage */
}
</style>
</head>
<body>
<div class="top_menu"></div>
<div class="menu">
<ul class="ty-menu__items">
  <li class="ty-menu__item"><a href="#home">new in</a></li>
  <li class="ty-menu__item"><a href="#news">homeware</a></li>
  <li class="ty-menu__item"><a href="#contact">decorating</a></li>
  <li class="ty-menu__item"><a href="#about">diy</a></li>
  <li class="ty-menu__item"><a href="#about">furniture</a></li>
  <li class="ty-menu__item"><a href="#about">bathroom</a></li>
  <li class="ty-menu__item"><a href="#about">garden</a></li>
  <li class="ty-menu__item"><a href="#about">offers</a></li>
</ul>
</div>
</body>

</html>

Upvotes: 0

Views: 105

Answers (2)

Bitwise Creative
Bitwise Creative

Reputation: 4105

A media query does the trick. Try adding this to the bottom of your CSS.

@media (max-width: 800px) {
    .menu {
        width: 100%;
        height: 40px;
        overflow: scroll;
    }
    .ty-menu__items {
        width: 800px;
    }
}

Fiddle: http://jsfiddle.net/6wrjnbj7/

Upvotes: 3

Mousey
Mousey

Reputation: 1865

You can set the overflow property to scroll in CSS, which should work give you have fixed height to 20px.

As Medda86 said media queries within the CSS will allow you to make responsive css at certain breakpoints (widths), see the google guide for this.

Upvotes: 0

Related Questions