Skip to content
Snippets Groups Projects
Commit 474c40dd authored by Silas Meister's avatar Silas Meister
Browse files

Finish first nav bar

parent d51bbada
Branches
No related tags found
No related merge requests found
img/share_icon.png

1.29 KiB

......@@ -23,14 +23,14 @@
<li><a href="#">NASA Audiences</a></li>
<li>
<form class="search-form" method="post" accept-charset="UTF-8">
<input type="search" size="15" placeholder="Search" />
<img class="search-icon" src="img/search_icon.png" />
<input type="search" size="10" placeholder="Search" />
<input type="button" />
</form>
</li>
<li><img src="" /></li>
<li><img src="img/share_icon.png" /></li>
</ul>
<ul class="centered-nav">
<ul class="center-nav">
<li><a href="#">International Space Station</a></li>
<li><a href="#">Journey to Mars</a></li>
<li><a href="#">Earth</a></li>
......
......@@ -74,25 +74,34 @@ nav ul li a {
float: left;
}
.top-nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.top-nav li {
font-size: 1em;
padding: 0.5em 0;
}
.top-nav li a {
.top-nav li a, .top-nav li img, .top-nav li form {
display: block;
border-right: 0.05em solid #eeeeee;
padding: 0.5em;
}
.top-nav li a {
border-right: 0.05em solid #eeeeee;
}
.top-nav li:nth-child(n+7) a {
border: none;
}
.top-nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
.top-nav li img {
height: 2.5em;
cursor: pointer;
}
.search-form {
......@@ -108,11 +117,17 @@ nav ul li a {
.search-form input[type="search"] {
border: none;
outline: none;
display: inline-block;
background-color: transparent;
font-size: 1em;
}
.search-form .search-icon {
height: 1.5em;
.search-form input[type="button"] {
width: 1.5em;
background-color: transparent;
background-image: url('img/search_icon.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: none;
cursor: pointer;
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment