ShellRox ShellRox - 5 months ago 7
HTML Question

How to properly align menu items when window is resized?

I am trying to build menu bar for my first website. On the window resolution of 1280x800 menu is seen properly. However, when scaling it down, Menu starts aligning incorrectly.

HTML:

{% load staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/>

<div class="menu">
<a href="/" class="logo"></a>
<a href="/shop" class="shopbtn" style="text-decoration:none">Buy Cherry</a>
</div>


CSS:

body {
background-color: lightgrey;
}


.menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
min-height: 10%;
min-width: 150%;
}


.logo {
position: fixed;
top: 0%;
left: 0%;
right: 0%;
background-image: url('http://i.imgur.com/kMdEoP6.png');
width: 250px;
height: 55px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.logo:hover {
background-image: url('http://i.imgur.com/7d2V63b.png');
width: 249px;
height: 55px;
}

.shopbtn {
position: fixed;
font-size: 12pt;
right: 10%;
left: 23%;
top: 5%;
white-space: nowrap;
color: black;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
float: right;
}

.shopbtn:hover {
color: darkred;


I have tried adding
margin-left
and
margin-right
with auto statement on all the elements, but the menu would mess up and still would go incorrectly when resized.




What is solution for keeping navigator proper when scaled? Is there any layout that could solve the problem? Can this be done without use of Javascript?

Answer

Just remove position fixed from both logo and shopbtn and add float left as below,

.logo {
   float:left;
}
.shopbtn {
   background:#666666;
   float:left;  
   margin:20px;
}

Now adjust your padding and margin accordingly.

Comments