Forums

Need To Move Menu Over (8 posts)

  1. 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?

  2. efpeterson
    Member
    Posted 1 year ago #

    Anybody?

  3. 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;
    }
  4. efpeterson
    Member
    Posted 1 year ago #

    That pushes the banner image to the right and doesn't move the actual menu to the left.

  5. 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 .

  6. 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?

  7. 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>
  8. eurekastudioz
    Member
    Posted 1 year ago #

    An yeah sorry add to #logo margin:auto

Topic Closed

This topic has been closed to new replies.

About this Topic