CODEWITHSUNDEEP
htmlcssresponsive-design
ariel
ariel

Reputation: 3072

How can I use Responsive Design principles to fix this screen size issue?

For a project of mine I decided to start using Responsive Design. The guide I was using wasn't definitive and purely introductory so I got lost somewhere there and can't find the problem here. If use the code below you'll render yourself a navigation menu. It looks fine on a 13 inch screen but go to a smaller screen size by perhaps shortening the width of your browser you'll notice that the navigation menu will take over the logo's space. How can I tweak this so that the navigation menu won't be on top of the logo and perhaps will stop before it goes over the logo?

HTML: 

<header class="bar_top">
    <div class="logo_block">
        <a href="index.php">
            <img alt="Logo" src="/logo.png" class="logo">
        </a>
    </div>
    <nav class="menu_above">
        <ul class="menu">
            <li class="menu_inner"><a href="#">Home</a></li>
            <li class="menu_inner"><a href="#">Our Products</a></li>
            <li class="menu_inner"><a href="#">Services</a></li>
            <li class="menu_inner"><a href="#">About Company</a></li>
            <li class="menu_inner"><a href="#">Contact</a>
                <ul class="menu_layer">
                    <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 1</a>
                    </li>
                    <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 2</a>
                    </li>
                    <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 3</a>
                    </li>
                </ul>
            </li>
            <span class="phone_us">000-000-0000</span>
        </ul>
    </nav>
</header>

CSS:

.bar_top {
    background-color: #FFFFFF;
    font-size:14.5px;
    width: 100%;
    height: 82px;
    top: 0;
    left: 0;
    position:absolute;
    z-index: 99;
}

.logo_block {
    display: block;
    position: absolute;
    z-index: 998;
}
.logo {
    margin-left: 30px;
    margin-top: -3px;
    height: 85px;
}
.menu_above {
    width: 960px;
    margin:  40px auto;
    float:right;
}
.menu_layer {
    margin-left: -40px;
}
.menu_contact_is {
    color: #ffffff !important;
}
a.menu_contact_inner {
    color: #ffffff !important;
}
.phone_us {
    font-size: 1.5625em;
    margin-left: 75px;
}

Upvotes: 0

Views: 229

Answers (2)

Marco Ramires
Marco Ramires

Reputation: 1116

If you are trying to keep the menu next to the logo on the left side of the page you should try this:

 .logo_block {
      display: inline-block;
      vertical-align: top;
  }

.menu_above {
        margin: 40px auto;
        display: inline-block;
 }

It's quite common to wrap the content with a div container that has a fixed with and auto margin on the sides to keep it on the center of the page.

You should also consider to revise the other elements on you page as you are using unnecessary relative positioning. ;)

Upvotes: 1

Fosfor
Fosfor

Reputation: 441

Try the attribute margin: auto; to set elements on the center of the screen or the container, instead of using static values to position the elements

Also you can read about flexible design and responsive design to learn about.

Upvotes: 1

Related Questions