Skip to content

Commit f62a428

Browse files
keitharmkeitharm
committed
Improve header nav style
1 parent c83c1d0 commit f62a428

4 files changed

Lines changed: 63 additions & 41 deletions

File tree

‎public/css/custom.css‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,28 @@ html {
33
width: 100%;
44
}
55

6+
.navbarContainer {
7+
background-color:rgba(255,255,255,0.8);
8+
position: fixed;
9+
margin: -65px auto 0px auto;
10+
padding-top: 10px;
11+
padding-bottom: 10px;
12+
width: 100%;
13+
height: 50px;
14+
z-index: 5;
15+
}
16+
617
#navbar {
18+
position: fixed;
719
display: block;
8-
margin: 15px auto 0px auto;
9-
padding: 0px 25px 50px 25px;
20+
padding: 0px 0px 0px 75px;
1021
width: 90%;
1122
}
1223

24+
.bodyContent {
25+
margin-top: 60px;
26+
}
27+
1328
#navbar h3 {
1429
float: left;
1530
font-size: 24pt;
@@ -421,6 +436,9 @@ input:read-only {
421436
#navbar {
422437
display: none !important;
423438
}
439+
.navbarContainer {
440+
display: none !important;
441+
}
424442

425443
.navLogo {
426444
display: none !important;

‎views/pages/index.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ function phoneNum(format) {
4343
</div>
4444
<div class="one-third column tripleSection">
4545
<h4 class="tripleTitle">Powerful</h4>
46-
<p class="tripleInfo">You have complete control over the output of your API. Whether your API has complicated conditions or takes advantage of a published snippet, </p>
46+
<p class="tripleInfo">You have complete control over the output of your API. Whether your API has complicated conditions or takes advantage of a published snippet, </p>
4747
</div>
4848
<div class="one-third column tripleSection">
49-
<h4 class="tripleTitle">Social</h4>
49+
<h4 class="tripleTitle">Sharing</h4>
5050
<p class="tripleInfo">Did you create an awesome piece of code that you think would be helpful for others to use in their APIs? We have snippets! Think of it like NPM modules for APIs.</p>
5151
</div>
5252
</div>

‎views/snippets/footer.ejs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
</div>
12
<script src="js/numeral.min.js"></script>
23
<script src="js/dashboard.js"></script>
34
<script>

‎views/snippets/navbar.ejs‎

Lines changed: 40 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -45,44 +45,47 @@ if (session.user !== undefined && session.user.tierName === 'Free') {
4545
%>
4646
<a href="" class="freeLogo invisible"><h3>RandomAPI</h3></a>
4747

48-
<div id="navbar" class="scroll">
49-
<a href="" class="navLogo"><h3>RandomAPI</h3></a>
50-
<div class="nav">
51-
<ul>
52-
<% if (session.loggedin === true) { %>
53-
<a href=""><li <%- selected['home'] %>>Home</li></a>
54-
<a href="<%= upgrade %>"><li <%- selected['pricing'] %>>Upgrade</li></a>
55-
<a href="documentation"><li <%- selected['documentation'] %>>Documentation</li></a>
56-
<a href="settings"><li <%- selected['settings'] %>>Settings</li></a>
57-
<a href="logout"><li>Logout</li></a>
58-
<% } else { %>
59-
<a href=""><li <%- selected['home'] %>>Home</li></a>
60-
<a href="search"><li <%- selected['search'] %>>Search</li></a>
61-
<a href="pricing"><li <%- selected['pricing'] %>>Pricing</li></a>
62-
<a href="documentation"><li <%- selected['documentation'] %>>Documentation</li></a>
63-
<a href="login"><li <%- selected['login'] %>>Login</li></a>
64-
<a href="register"><li class="signupBadge">Sign Up</li></a>
65-
<% } %>
66-
</ul>
48+
<div class="navbarContainer">
49+
<div id="navbar">
50+
<a href="" class="navLogo"><h3>RandomAPI</h3></a>
51+
<div class="nav">
52+
<ul>
53+
<% if (session.loggedin === true) { %>
54+
<a href=""><li <%- selected['home'] %>>Home</li></a>
55+
<a href="<%= upgrade %>"><li <%- selected['pricing'] %>>Upgrade</li></a>
56+
<a href="documentation"><li <%- selected['documentation'] %>>Documentation</li></a>
57+
<a href="settings"><li <%- selected['settings'] %>>Settings</li></a>
58+
<a href="logout"><li>Logout</li></a>
59+
<% } else { %>
60+
<a href=""><li <%- selected['home'] %>>Home</li></a>
61+
<a href="search"><li <%- selected['search'] %>>Search</li></a>
62+
<a href="pricing"><li <%- selected['pricing'] %>>Pricing</li></a>
63+
<a href="documentation"><li <%- selected['documentation'] %>>Documentation</li></a>
64+
<a href="login"><li <%- selected['login'] %>>Login</li></a>
65+
<a href="register"><li class="signupBadge">Sign Up</li></a>
66+
<% } %>
67+
</ul>
68+
</div>
6769
</div>
6870
</div>
6971
<div class="mobileNav">
70-
<button class="toggleButton"></button>
71-
<div class="mobileMenu">
72-
<a href=""><h3>RandomAPI</h3></a>
73-
<% if (session.loggedin === true) { %>
74-
<a href="">Home</a>
75-
<a href="<%= upgrade %>">Upgrade</a>
76-
<a href="documentation">Documentation</a>
77-
<a href="settings">Settings</a>
78-
<a href="logout">Logout</a>
79-
<% } else { %>
80-
<a href="">Home</a>
81-
<a href="search">Search</a>
82-
<a href="pricing">Pricing</a>
83-
<a href="documentation">Documentation</a>
84-
<a href="login">Login</a>
85-
<a href="register">Sign Up</a>
86-
<% } %>
87-
</div>
72+
<button class="toggleButton"></button>
73+
<div class="mobileMenu">
74+
<a href=""><h3>RandomAPI</h3></a>
75+
<% if (session.loggedin === true) { %>
76+
<a href="">Home</a>
77+
<a href="<%= upgrade %>">Upgrade</a>
78+
<a href="documentation">Documentation</a>
79+
<a href="settings">Settings</a>
80+
<a href="logout">Logout</a>
81+
<% } else { %>
82+
<a href="">Home</a>
83+
<a href="search">Search</a>
84+
<a href="pricing">Pricing</a>
85+
<a href="documentation">Documentation</a>
86+
<a href="login">Login</a>
87+
<a href="register">Sign Up</a>
88+
<% } %>
8889
</div>
90+
</div>
91+
<div class="bodyContent">

0 commit comments

Comments
 (0)