efpeterson
Member
Posted 1 year ago #
Hi folks,
I need to move the menu over to the left more toward the temporary BUMCU logo here: http://efpeterson.com/. However, whenever I edit the CSS file for the nav, I can't get it to move left. Even if I edit the width to 500 and float left it disappears. You can find the CSS style sheet here: http://efpeterson.com/wp-content/themes/new-balance-of-blue/style.css
Any thoughts?
efpeterson
Member
Posted 1 year ago #
eurekastudioz
Member
Posted 1 year ago #
You have the following code :
#header-right {
float: right;
width: 490px;
height: 250px;
display: inline;
overflow-x: hidden;
overflow-y: hidden;
}
Make it :
#header-right {
float: right;
margin-right:60px;
width: 490px;
height: 250px;
display: inline;
overflow-x: hidden;
overflow-y: hidden;
}
efpeterson
Member
Posted 1 year ago #
That pushes the banner image to the right and doesn't move the actual menu to the left.
eurekastudioz
Member
Posted 1 year ago #
sorry my bad, i used the wrong class here, do this to the nav, but this is a badoption, ur html is quite badly established, things overlap :
style="position:absolute;top:220px;right:50px"
If you like i can make you a proper header container with all your things as this is really way outta propotion. And your menu is longer than the available space .
efpeterson
Member
Posted 1 year ago #
It's the "new-balance-of-blue" theme. I've just modified the images a bit. Never touched the code, which is why I'm having a bit of difficulty with it. How do you suggest going about making a proper header container?
eurekastudioz
Member
Posted 1 year ago #
Most probable like this :
<html>
<head>
<style>
#header {
position:relative;
margin:0px auto;
margin-top:60px;
}
#logo{
float:left;
margin-left:60px;
height:(height of your pix);
width:(width of your pix);
}
.banner-block {
float:right;
margin-right:20px;
margin-top:60px;
}
.nav {
position:absolute;
bottom:20px;
right:10px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<img src="(your image here)" alt="" />
</div>
<div class="banner-block">
</div>
<div class="nav">
<ul>
<li><a href="http://efpeterson.com">Home</a></li>
<li class="page_item page-item-103"><a href="http://efpeterson.com/?page_id=103" title="Personal Training">Personal Training</a></li>
<li class="page_item page-item-105"><a href="http://efpeterson.com/?page_id=105" title="Group Fitness">Group Fitness</a></li>
<li class="page_item page-item-107"><a href="http://efpeterson.com/?page_id=107" title="Memberships">Memberships</a></li>
<li class="page_item page-item-109"><a href="http://efpeterson.com/?page_id=109" title="Athletics">Athletics</a></li>
<li class="page_item page-item-111"><a href="http://efpeterson.com/?page_id=111" title="About">About</a></li>
<li class="page_item page-item-113"><a href="http://efpeterson.com/?page_id=113" title="Contact">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
eurekastudioz
Member
Posted 1 year ago #
An yeah sorry add to #logo margin:auto