How to move menu to the right of the logo and to clean up unused space?


Tags: html,css,menu,navigation

Problem :

I've been trying to get a layout on a website for a nonprofit my friends and I are starting but I can't figure out how to get rid of the unused spaces on the menu or how to move the menu to the right of the logo. This is what the site looks like right now without any content: https://i.gyazo.com/96210e6a810914ef4259d0a690040324.png

I want to move get rid of the space underneath the leadership tab and to make the dark blue background only run up to a certain width on the leadership tab, as it is overlapping with my submenu. I'd also really appreciate instruction on how to move the menu to right next to the menu as opposed to below it. My source code is:

<html>
<head>
<title>Home </title>
<link type="text/css" rel="stylesheet" href="stylesheethome.css"/>

</head>

<body>
<div id="header">
<a href="home.php"><img src="logo.jpg" alt="BEFA Inc." height="100" width="130" /></a>

</div> <!-- header !-->

<div id="navigation">
<ul>
    <li> <a href="WhoWeAre.php">WHO WE ARE</a>

        <ul class="wwedrop">
            <li> <a href="BefaAtAGlance.php"> BEFA AT A GLANCE</a> </li>
            <li> <a href="Leadership.php"> LEADERSHIP </a> 

                <ul class="leaders">
                    <li> <a href="BoardofDirectors.php">BOARD OF DIRECTORS </a> </li>
                    <li> <a href="ExecutiveOfficers.php">EXECUTIVE OFFICERS </a> </li>
                    <li> <a href="ManagementCommittee.php"> MAMANGEMENT COMMITTEE </a> </li>
                </ul> <!-- These are the links underneath/to the side of the Leadership tab of the Who We Are tab !-->
                </li>

        </ul> <!-- These are links underneath the "Who We Are" tab !-->
        </li>
    <li> <a href="Locations.php"> LOCATIONS </a> </li>
    <li> <a href="Volunteers.php"> VOLUNTEERS </a> </li>
    <li> <a href="Donate.php"> DONATE </a> </li>
    <li> <a href="FuturePlans.php"> FUTURE PLANS </a> </li>
    <li> <a href="ContactUs.php"> CONTACT US </a> </li>



</ul> <!-- These are the tabs underneath the navigation bar. Right now, only the Who We Are tab has a nested list(s) !-->

</div> <!-- navigation !-->

<div id="container">

<div id="content">

<div id="contentleft">



</div> <!-- contentleft !-->
</div><!-- content !-->
</div><!-- container !-->

<div id="sidebar">

</div>

<div id="footer">
<p> &copy;2016 Befa Inc. </p>

</div>
</body>
</html>

and my css code is:

img{
    border:none;
}
html{
    background: url("gradientbackground.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body{
    color:#111517;
    font-family: Helvetica;

}
header{
    width: 50px;
    min-height: 60px; 
    margin: 0 auto;


}
#navigation{
    width: 960 px;
    margin: 0 auto;
    position: relative;
    top: 0 px;
    right: 0 px;



}
.main-navigation a {
border-bottom: 1px solid #888;
border-top: 1px solid #888;
}

#navigation ul{
    margin:0;
    padding:0;
    list-style-type:none;

}
#navigation ul li{
    display:inline-block;
    position: relative;
    line-height: 20 px;
    text-align: left;
    font-weight: bold;
    font-family: Helvetica;
}
#navigation ul li a{
    display: block;
    padding: 10px 30px;
    color:#111517;
    text-decoration:none;
}
#navigation ul li a:hover{
    background-color: #000066;
    color: #ffffff
}
#navigation ul li ul.wwedrop{
    min-width: 125 px;
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index:999;
    left:0;
}
#navigation ul li:hover ul.wwedrop{
    display: block;
}
#navigation ul li ul.wwedrop li{
    display: block;
}
#navigation ul li ul.wwedrop li ul.leaders{
    display: none;
}

#navigation ul.wwedrop li:hover ul.leaders{
    display:block;
    margin-left:175px;
    margin-top: -70px;

}


/* the navigation list material goes here and I need to edit it so that it looks like the goldman sachs one by putting sliding feature etc. */

container{
    background:#eef7fa;
}
#footer p{
    font-size: 11px;
    position: absolute;
}

Any help would be greatly appreciated. Thank you!



Solution :

After a playing with your code in this JsFiddle I've found a solution to your problems

  1. The solution to the width of the "leadership" menu item is rather simple: give a max-width to the #navigation ul li a:hover so that the background will no long overlap the submenu
  2. As for the problem with the menu being below the logo, simply put your logo in a li at the top of the ul.

Here's what your code will become.

Note: The code posted here is the code I've changed, for the full code check out the JsFiddle, this is because your code is rather long to post in an answer.

HTML

<div id="header">
  <!-- <a href="home.php"><img src="logo.jpg" alt="BEFA Inc." height="100" width="130" /></a> -->
  <!-- Removed this <a> -->

</div> <!-- header !-->

<div id="navigation">
  <ul>
    <li id="logo"><a href="home.php"><img src="logo.jpg" alt="BEFA Inc." height="100" width="130" /></a></li> 
    <!-- Added the logo here -->
    <li> <a href="WhoWeAre.php">WHO WE ARE</a>
    </li>
  </ul>
</div>

CSS

#navigation ul li a:hover{
    background-color: #000066;
    max-width:130px; /* Added this to solve the overflowing background -->
    color: #ffffff
}

Note: This is an example as to how you can fix it, change it in whatever way you see fit.

JsFiddle example again

Hope this helps!


    CSS Howto..

    Show different forms using buttons with animation

    How to place text over different images with different positions?

    How to access my .png from a folder using CSS?

    How to put an image at the left side of text without putting the image into css

    How to create profession box shadow effect in div using css

    CSS/XHTML: Show div after a specific count of table rows

    How to float elements with different heights?

    How to determine if width has px or %

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How do i create custom grid class in Bootstrap for lg as well as xs screen size?

    How to change header size in css

    css how to align a graphic on page

    How to construct multilevel menu using CSS only?

    jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

    How to manage clashing third party CSS

    How to apply CSS to second word in a string?

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How to Stop jQuery from Buffering Hover Effects?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to get a style attribute from a CSS class by javascript/jQuery?

    CSS hide/show effect works on Firefox but not on Chrome/Safari

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How: have more than one CSS sprite on a page

    How do I create a pattern overlay in CSS

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How to avoid inheriting opacity property in CSS?

    How to modify programmatically with javascript the css ::before and ::after [duplicate]