Solution 1 :

Here is the solution.I have changed the html structure a little.If you want something else, please let me know.Thank You.

<html><head>
    <style>
    
        #home {
width: 120px;
height: 60px;
background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
</head>
<body>
    

<style>
ul {
  list-style-type: none;
  height:60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #242626;
  font-family: Arial, Helvetica, sans-serif;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #cedacb;
  text-align: center;
  padding: 14px 16px;
  widht: 120px;
  min-height: 60px;
  vertical-align: top;
  text-decoration: none;
}

li a:hover {
  color: white;
}

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#home {
  width: 120px;
  height: 60px;
  background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

#logo { 
  float: left; 
}

</style>




<div class="navbar" style="
    /* float: unset; */
    background: black;
    /* height: 70px; */
">
<a href="#home" style="float: left;"><img id="home" src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo"></a>

<ul style="
    /* float: left; */
">
  
  <li><a href="#search">Search</a></li>
  <li><a href="#news">Submit</a></li> 
  <li class="dropdown" style="float:right;">
    <a href="javascript:void(0)" class="dropbtn">Notification</a>
    <div class="dropdown-content" style="right:0;">
      <a href="#">All Inbox</a>
      <a href="#">Inbox</a>
      <a href="#">Watch</a>
      <a href="#">Note</a>
    </div>
  </li>
</ul></div>

<script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>

Solution 2 :

You can apply flex on the parent (ul) give it a class name so that it won’t apply to all your (ul), try this:

ul.navbar-list {

    display:flex; 

    align-items:center;

    flex-wrap:wrap;

}

good luck.

Solution 3 :

Are you trying to make this ( Click to see the result of this code )

    <head>
        <title>Nav-bar</title>
        <style>
            body{
                margin: 0;
            }
            .navbar{
                width: 100%;
                height: 60px;
                background-color: #242626;
                font-family: Arial, Helvetica, sans-serif;

            }
            .nav-brand{
                width: 120px;
                height: 60px;
                display: inline-block;
            }

            .nav-item{
                align-items: left;
                display: inline-block;
                float: right;
            }

            .nav-item ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                font-family: Arial, Helvetica, sans-serif;
                display:table-cell;
                vertical-align: middle;
                height: 60px;
            }

            .nav-item ul li{
                float: left;
                padding-right:30px;

                padding-top: 5px;
                margin: 0 auto;

            }

            .nav-item ul li a{
                color: aliceblue;
                text-decoration: none;
                font-family: candara;
            }

    <style>
    .dropdown {
    position: relative;
    display: inline-block;
    }

    #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 {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    }

    #dropdown-content a:hover {
    background-color: #f1f1f1;
    color: black;
    }

    .dropdown:hover #dropdown-content {
    display: block;
    }

    #home {
    width: 120px;
    height: 60px;
    background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
    }

    #logo { 
    float: left; 
    }

    </style>

        </style>
    </head>

    <body>
        <div class="navbar">
            <div class="nav-brand">
                <span class="brand-img">
                    <img id="home"  src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" 
                    width="100%" height="60px">
                </span>
            </div>
                <div class="nav-item">
            <ul>

                    <li><a href="#search">Search</a></li>
                    <li><a href="#submit">Submit</a></li>
                    <li class="dropdown"><a  href="javascript:void(0)" class="dropbtn">Notification</a>
                    <div id="dropdown-content" style="right:0;">
                        <a href="#">All Inbox</a>
                        <a href="#">Inbox</a>
                        <a href="#">Watch</a>
                        <a href="#">Note</a>
                    </div></li>
                </div>
            </ul>
        </div>
    </body>

    </html>

( Click to see the result of this code )

Problem :

I got a problem with a website navbar it is too wide because of the logo I put and it affects the text making them all stuck to the top how can I make the text or logo align with each other?

<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #242626;
  font-family: Arial, Helvetica, sans-serif;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #cedacb;
  text-align: center;
  padding: 14px 16px;
  widht: 120px;
  min-height: 60px;
  vertical-align: top;
  text-decoration: none;
}

li a:hover {
  color: white;
}

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.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 {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#home {
  width: 120px;
  height: 60px;
  background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

#logo { 
  float: left; 
}

</style>
</style>
</head>
<body>

<ul>
  <li><a href="#home"><img id="home" src="https://st.deviantart.net/minish/main/logo/card_black_large.png" alt="Logo" id="logo"></a></li>
  <li><a href="#search">Search</a></li>
  <li><a href="#news">Submit</a></li> 
  <li class="dropdown" style="float:right;">
    <a href="javascript:void(0)" class="dropbtn">Notification</a>
    <div class="dropdown-content" style="right:0;">
      <a href="#">All Inbox</a>
      <a href="#">Inbox</a>
      <a href="#">Watch</a>
      <a href="#">Note</a>
    </div>
  </li>
</ul>

</body>
</html>`

The Website navbar I’m working on:

And to clarify no I’m not working for Deviantart I choose the picture for logo practice and well it wouldn’t fit at first then I change the code up so that I could make it fit to the navbar with this code

#home {
width: 120px;
height: 60px;
background: url(https://st.deviantart.net/minish/main/logo/card_black_large.png) 0 0;
}

and it screws the text on the navbar how could I fix it so that they all align together?

Comments

Comment posted by maurycy

The easiest solution would be to set

Comment posted by NewbieCoder469

Thank you very much, it works.

By

Leave a Reply

Your email address will not be published. Required fields are marked *