i want change padding when screen becomes small, links don't go onto 2 lines instead horizontal scroll comes up. possible using css? don't want use javascript
<!doctype html> <html> <head> <style> .top_menu { position:fixed; background: #f5f5f5; width:100%; top:0; left:0; height:20px; /* decide on @ stage */ padding: 0; } .menu { font-family: verdana, arial; position:fixed; background: transparent; width:100%; top:75px; left:0; height:25px; /* decide on @ stage */ padding: 0; text-align:center; font-size: 12px; font-weight: 600; /* decide on @ stage */ border-bottom: 1px solid #ccc; /* decide on @ stage */ border-top: 1px solid #ccc; /* decide on @ 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 @ stage */ background: transparent; border-bottom: 3px solid #9b9b9b; /* decide on @ stage */ color: #9b9b9b; /* decide on @ 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>
a media query trick. try adding bottom of css.
@media (max-width: 800px) { .menu { width: 100%; height: 40px; overflow: scroll; } .ty-menu__items { width: 800px; } } fiddle: http://jsfiddle.net/6wrjnbj7/
Comments
Post a Comment