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>
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.
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 )
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?
Thank you very much, it works.
