Search input in navigation bar
I am trying to implement a input/search-field in my website's navigation bar. I would very much like it to work like the YouTube navbar where the input-field is centered in between the left-side logo and links on the right side. But also such that the width of the input field is dynamic and compresses when the browser page is reduced in width.
I am not skilled in CSS and the only way I have been able to even make the search-field sit within the navbar is by setting the position to absolute (in the input-field class). I understand that you can accomplish the same outcome in multiple different ways with CSS and I know that fiddling with the position is properly the wrong way to go if it is also to be dynamic.
Please find a JSFiddle below and the html/CSS code. I am using MaterializeCSS to create the website and the 'brand-logo' class is used to center the logo when the browser window is below a certain threshold. I then use the class 'hide-on-med-and-down' on the ul to make the links disappear when the logo centers. However, I have removed the 'hide-on-med-and-below' class in the below JSFiddle to make it more apparent how the search input currently works.
https://jsfiddle.net/gwm6e031/19/
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="input-field hide-on-med-and-down">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
</nav>
CSS code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
background: rgba(0, 0, 0, 0.4);
z-index: 20;
height: 80px;
line-height: 80px;
}
nav .nav-wrapper {
padding: 0px 50px;
}
nav .logo-text {
padding-top: 15px;
font-family: "Raleway", sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bold;
overflow: hidden;
}
nav .logo-svg {
width: 50px;
height: 50px;
float: left;
background-color: #fff;
}
nav .right {
}
nav ul a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: block;
}
nav ul a:focus {
text-decoration: underline;
}
nav li a:hover {
background: #006699;
}
/* Search bar TOP */
nav .input-field {
position: absolute;
bottom: 0px;
left: 420px;
width: 22%;
max-width: 300px;
}
nav input {
font-family: "Lato", sans-serif !important;
height: 20px !important;
background: #545a69 !important;
background: linear-gradient( rgba(84, 90, 105, 0.9), rgba(84, 90, 105, 0.9)) !important;
border: none !important;
font-size: 14px !important;
color: #fff !important;
padding: 5px 0px 5px 5px !important;
padding-left: 15px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
html css materialize
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
add a comment |
I am trying to implement a input/search-field in my website's navigation bar. I would very much like it to work like the YouTube navbar where the input-field is centered in between the left-side logo and links on the right side. But also such that the width of the input field is dynamic and compresses when the browser page is reduced in width.
I am not skilled in CSS and the only way I have been able to even make the search-field sit within the navbar is by setting the position to absolute (in the input-field class). I understand that you can accomplish the same outcome in multiple different ways with CSS and I know that fiddling with the position is properly the wrong way to go if it is also to be dynamic.
Please find a JSFiddle below and the html/CSS code. I am using MaterializeCSS to create the website and the 'brand-logo' class is used to center the logo when the browser window is below a certain threshold. I then use the class 'hide-on-med-and-down' on the ul to make the links disappear when the logo centers. However, I have removed the 'hide-on-med-and-below' class in the below JSFiddle to make it more apparent how the search input currently works.
https://jsfiddle.net/gwm6e031/19/
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="input-field hide-on-med-and-down">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
</nav>
CSS code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
background: rgba(0, 0, 0, 0.4);
z-index: 20;
height: 80px;
line-height: 80px;
}
nav .nav-wrapper {
padding: 0px 50px;
}
nav .logo-text {
padding-top: 15px;
font-family: "Raleway", sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bold;
overflow: hidden;
}
nav .logo-svg {
width: 50px;
height: 50px;
float: left;
background-color: #fff;
}
nav .right {
}
nav ul a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: block;
}
nav ul a:focus {
text-decoration: underline;
}
nav li a:hover {
background: #006699;
}
/* Search bar TOP */
nav .input-field {
position: absolute;
bottom: 0px;
left: 420px;
width: 22%;
max-width: 300px;
}
nav input {
font-family: "Lato", sans-serif !important;
height: 20px !important;
background: #545a69 !important;
background: linear-gradient( rgba(84, 90, 105, 0.9), rgba(84, 90, 105, 0.9)) !important;
border: none !important;
font-size: 14px !important;
color: #fff !important;
padding: 5px 0px 5px 5px !important;
padding-left: 15px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
html css materialize
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
Does the structure of your HTML have to be in the same form as the example you've given or can it be changed?
– Danny
Nov 24 '18 at 22:16
I am open to all changes and edits! I have just tried to make this example be as close to the outcome I want as possible but I completely understand that some other setup can work better in this case.
– ChartProblems
Nov 24 '18 at 22:18
add a comment |
I am trying to implement a input/search-field in my website's navigation bar. I would very much like it to work like the YouTube navbar where the input-field is centered in between the left-side logo and links on the right side. But also such that the width of the input field is dynamic and compresses when the browser page is reduced in width.
I am not skilled in CSS and the only way I have been able to even make the search-field sit within the navbar is by setting the position to absolute (in the input-field class). I understand that you can accomplish the same outcome in multiple different ways with CSS and I know that fiddling with the position is properly the wrong way to go if it is also to be dynamic.
Please find a JSFiddle below and the html/CSS code. I am using MaterializeCSS to create the website and the 'brand-logo' class is used to center the logo when the browser window is below a certain threshold. I then use the class 'hide-on-med-and-down' on the ul to make the links disappear when the logo centers. However, I have removed the 'hide-on-med-and-below' class in the below JSFiddle to make it more apparent how the search input currently works.
https://jsfiddle.net/gwm6e031/19/
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="input-field hide-on-med-and-down">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
</nav>
CSS code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
background: rgba(0, 0, 0, 0.4);
z-index: 20;
height: 80px;
line-height: 80px;
}
nav .nav-wrapper {
padding: 0px 50px;
}
nav .logo-text {
padding-top: 15px;
font-family: "Raleway", sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bold;
overflow: hidden;
}
nav .logo-svg {
width: 50px;
height: 50px;
float: left;
background-color: #fff;
}
nav .right {
}
nav ul a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: block;
}
nav ul a:focus {
text-decoration: underline;
}
nav li a:hover {
background: #006699;
}
/* Search bar TOP */
nav .input-field {
position: absolute;
bottom: 0px;
left: 420px;
width: 22%;
max-width: 300px;
}
nav input {
font-family: "Lato", sans-serif !important;
height: 20px !important;
background: #545a69 !important;
background: linear-gradient( rgba(84, 90, 105, 0.9), rgba(84, 90, 105, 0.9)) !important;
border: none !important;
font-size: 14px !important;
color: #fff !important;
padding: 5px 0px 5px 5px !important;
padding-left: 15px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
html css materialize
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
I am trying to implement a input/search-field in my website's navigation bar. I would very much like it to work like the YouTube navbar where the input-field is centered in between the left-side logo and links on the right side. But also such that the width of the input field is dynamic and compresses when the browser page is reduced in width.
I am not skilled in CSS and the only way I have been able to even make the search-field sit within the navbar is by setting the position to absolute (in the input-field class). I understand that you can accomplish the same outcome in multiple different ways with CSS and I know that fiddling with the position is properly the wrong way to go if it is also to be dynamic.
Please find a JSFiddle below and the html/CSS code. I am using MaterializeCSS to create the website and the 'brand-logo' class is used to center the logo when the browser window is below a certain threshold. I then use the class 'hide-on-med-and-down' on the ul to make the links disappear when the logo centers. However, I have removed the 'hide-on-med-and-below' class in the below JSFiddle to make it more apparent how the search input currently works.
https://jsfiddle.net/gwm6e031/19/
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="input-field hide-on-med-and-down">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
</nav>
CSS code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
background: rgba(0, 0, 0, 0.4);
z-index: 20;
height: 80px;
line-height: 80px;
}
nav .nav-wrapper {
padding: 0px 50px;
}
nav .logo-text {
padding-top: 15px;
font-family: "Raleway", sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bold;
overflow: hidden;
}
nav .logo-svg {
width: 50px;
height: 50px;
float: left;
background-color: #fff;
}
nav .right {
}
nav ul a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: block;
}
nav ul a:focus {
text-decoration: underline;
}
nav li a:hover {
background: #006699;
}
/* Search bar TOP */
nav .input-field {
position: absolute;
bottom: 0px;
left: 420px;
width: 22%;
max-width: 300px;
}
nav input {
font-family: "Lato", sans-serif !important;
height: 20px !important;
background: #545a69 !important;
background: linear-gradient( rgba(84, 90, 105, 0.9), rgba(84, 90, 105, 0.9)) !important;
border: none !important;
font-size: 14px !important;
color: #fff !important;
padding: 5px 0px 5px 5px !important;
padding-left: 15px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
html css materialize
html css materialize
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
asked Nov 24 '18 at 21:34
ChartProblemsChartProblems
1059
1059
Does the structure of your HTML have to be in the same form as the example you've given or can it be changed?
– Danny
Nov 24 '18 at 22:16
I am open to all changes and edits! I have just tried to make this example be as close to the outcome I want as possible but I completely understand that some other setup can work better in this case.
– ChartProblems
Nov 24 '18 at 22:18
add a comment |
Does the structure of your HTML have to be in the same form as the example you've given or can it be changed?
– Danny
Nov 24 '18 at 22:16
I am open to all changes and edits! I have just tried to make this example be as close to the outcome I want as possible but I completely understand that some other setup can work better in this case.
– ChartProblems
Nov 24 '18 at 22:18
Does the structure of your HTML have to be in the same form as the example you've given or can it be changed?
– Danny
Nov 24 '18 at 22:16
Does the structure of your HTML have to be in the same form as the example you've given or can it be changed?
– Danny
Nov 24 '18 at 22:16
I am open to all changes and edits! I have just tried to make this example be as close to the outcome I want as possible but I completely understand that some other setup can work better in this case.
– ChartProblems
Nov 24 '18 at 22:18
I am open to all changes and edits! I have just tried to make this example be as close to the outcome I want as possible but I completely understand that some other setup can work better in this case.
– ChartProblems
Nov 24 '18 at 22:18
add a comment |
1 Answer
1
active
oldest
votes
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</body>
</html>
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462563%2fsearch-input-in-navigation-bar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</body>
</html>
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
add a comment |
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</body>
</html>
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
add a comment |
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</body>
</html>
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
</body>
</html>
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
edited Nov 25 '18 at 0:44
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
answered Nov 25 '18 at 0:37
Botić DenisBotić Denis
567
567
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462563%2fsearch-input-in-navigation-bar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does the structure of your HTML have to be in the same form as the example you've given or can it be changed?
– Danny
Nov 24 '18 at 22:16
I am open to all changes and edits! I have just tried to make this example be as close to the outcome I want as possible but I completely understand that some other setup can work better in this case.
– ChartProblems
Nov 24 '18 at 22:18