CODEWITHSUNDEEP
css
Jacob Zielinski
Jacob Zielinski

Reputation: 248

Logo next to the menu items CSS

I found similar topics but I'm still not able to do it.

I'm novice with css and one of my 'projects' is to recreate a home page of bootstrap (https://getbootstrap.com/) I'm currently stuck on navbar. please look at my page and actual bootstrap home page, to get the idea.

starting form left [logo] and in a middle of it menu items.

thanks for all help.

ul {
   list-style-type: none;
   margin: -8px;
   padding: 20px;
   overflow: hidden;
   background-color:#563D7B;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 14px;
}

li {
   float: left;
}

li a {
   color: #CABCE1;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
}

li a:hover {
   color: white;
}

.navlogo {
   filter: invert(1);
   top: 20px;
   left: -20px;
   float: left;
}

.listhead{
   
}

.dropdown {
   float: left;
   overflow: hidden;
}


.dropdown .dropbtn {
   cursor: pointer;
   font-size: 16px;
   border: none;
   outline: none;
   color: #CABCE1;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
   color: white;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
}
.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}


.show {
   display: block;
}

@media screen and (max-width: 500px) {
   .navbar a {
      float: none;
      display: block;
   }

   

        
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="../ver3/css/main.css">
   <title>Document</title>
</head>

<body>
   
   <header>
<img class="navlogo" src="../ver3/img/mnlogo.svg">
      <nav>
         <div id="menu-outer">
            <div class="tavle">
               <div class="navigation-bar">
                  
                  <ul id="horizontal">
                     
                     <li><a href="#">Home</a>
                     <li><a href="#">Documentation</a>
                     <li><a href="#">Examples</a>
                     <li><a href="#">Themes</a>
                     <li><a href="#">Expo</a>
                     <li><a href="#">Blog</a>
                  </ul>
               </div>

            </div>
         </div>
      </nav>
   </header>

</body>

</html>

Upvotes: 1

Views: 317

Answers (2)

Daniel Sixl
Daniel Sixl

Reputation: 2499

It would be easier to use a common parent element for both, the logo and the navigation list to build the top bar and give it a background-color.

Building a horizontal navigation like this is especially easy with flex-box: 

body {
 margin: 0;
 padding: 0;
}


.nav-main {
  display: flex;
  align-items: center;
  background-color:#563D7B;
}

.nav-main .branding img {
  display: block;
}

.nav-main ul {
   list-style-type: none; 
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 14px;
}

.nav-main li {
  display: inline-block;
}

.nav-main li a {
   color: #CABCE1;
   padding: 15px;
   text-decoration: none;
   display: block;
   transition: all 300ms ease-in-out;
}

.nav-main li a:hover {
   color: white;
}

.navlogo {
   filter: invert(1);
}

.dropdown {
   float: left;
   overflow: hidden;
}


.dropdown .dropbtn {
   cursor: pointer;
   font-size: 16px;
   border: none;
   outline: none;
   color: #CABCE1;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
   color: white;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
}
.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}


.show {
   display: block;
}

@media screen and (max-width: 500px) {
   .navbar a {
      float: none;
      display: block;
   }
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="../ver3/css/main.css">
   <title>Document</title>
</head>

<body>
   
   <header>
      <nav class="nav-main">
        <a class="branding" href="/">
          <img src="https://fakeimg.pl/120x60/000000,000/FFF,255/?text=Nice–Logo&font=lobster">
        </a>
        <ul>
           <li><a href="#">Home</a>
           <li><a href="#">Documentation</a>
           <li><a href="#">Examples</a>
           <li><a href="#">Themes</a>
           <li><a href="#">Expo</a>
           <li><a href="#">Blog</a>
        </ul>
      </nav>
   </header>

</body>

</html>

Upvotes: 0

Mikepote
Mikepote

Reputation: 6553

Using floats is old-school these days and make it difficult to do certain things (like vertical centering). I've swapped your #horizontal li's from floats to use Flexbox instead. 3 lines of CSS to center them.

ul {
   list-style-type: none;
   margin: -8px;
   padding: 20px;
   overflow: hidden;
   background-color:#563D7B;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 14px;
}

#horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

li a {
   color: #CABCE1;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
}

li a:hover {
   color: white;
}

.navlogo {
   width: 50px;
   height: 50px;
}

.listhead{
   
}

.dropdown {
   float: left;
   overflow: hidden;
}


.dropdown .dropbtn {
   cursor: pointer;
   font-size: 16px;
   border: none;
   outline: none;
   color: #CABCE1;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
   color: white;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
}
.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}


.show {
   display: block;
}

@media screen and (max-width: 500px) {
   .navbar a {
      float: none;
      display: block;
   }
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" type="text/css" href="../ver3/css/main.css">
   <title>Document</title>
</head>

<body>
   
   <header>
      <nav>
         <div id="menu-outer">
            <div class="tavle">
               <div class="navigation-bar">
                  
                  <ul id="horizontal">
                     
                     <li><img class="navlogo" src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-outline.svg" width="50" height="50"></li>
                     <li><a href="#">Home</a>
                     <li><a href="#">Documentation</a>
                     <li><a href="#">Examples</a>
                     <li><a href="#">Themes</a>
                     <li><a href="#">Expo</a>
                     <li><a href="#">Blog</a>
                  </ul>
               </div>

            </div>
         </div>
      </nav>
   </header>

</body>

</html>

Upvotes: 1

Related Questions