How to add menu navigation under of logo and banner without design corrupted



when add menu navigation under of logo and banner my design corrupted

Problem happen here in fiddle after add gray menu .

my design i need to do is :

menu i need to add below of logo and banner is

Gray menu (html && css)


 <header class="news">
            <div class="nav">
                    <li class="home"><a href="#">Home</a></li>
                    <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
                    <li class="about"><a href="#">About</a></li>
                    <li class="news"><a href="#">Newsletter</a></li>
                    <li class="contact"><a href="#">Contact</a></li>

body {
  margin: 0;
  padding: 0;
  /*background: #ccc;*/
  background: #ccc;

.nav ul {
  list-style: none;

  background-color: #444;
    /*background-color:  #39bd00;*/
  text-align: center;
  padding: 0;
  margin: 0;
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;

.nav a:hover {
  background-color: #005f5f;

.nav {
  background-color: #fff;
  color: #444;
  cursor: default;

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;



the image won't show

If you need help, supply code we can work with please, thank you :slight_smile:


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.