Sharkk/Torq
Sharkk/Torq
1
0
Fork 0
Code Issues Pull Requests Releases Activity

navbar fixed 1

Browse Source
This commit is contained in:
Sky Johnson 2025-04-18 15:09:06 -05:00
parent 006997c600
commit f856e22993
4 changed files with 85 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/container.css
View File

@ -4,6 +4,7 @@
*/ */
.container { .container {
position: relative;
width: 100%; width: 100%;
padding: 0 calc(var(--grid-gutter) / 2); padding: 0 calc(var(--grid-gutter) / 2);
margin: 0 auto; margin: 0 auto;

19
css/navbar.css
View File

@ -38,6 +38,17 @@
margin: 1.25rem 0; margin: 1.25rem 0;
min-height: var(--navbar-height); min-height: var(--navbar-height);
padding: 0 1.25rem; padding: 0 1.25rem;
&.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1030;
border-radius: 0;
margin: 0;
}
} }
.navbar .brand { .navbar .brand {
@ -193,3 +204,11 @@
display: block; display: block;
} }
} }
body.has-fixed-navbar {
padding-top: calc(var(--navbar-height) + 20px);
}
.container.has-fixed-navbar {
padding-top: calc(var(--navbar-height) + 20px);
}

62
tests/navbar-fixed.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Navbar</title>
<link rel="stylesheet" href="../css/colors.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/container.css">
<link rel="stylesheet" href="../css/hero.css">
<link rel="stylesheet" href="../css/navbar.css">
</head>
<body>
<div class="container has-fixed-navbar">
<!-- Fixed Navbar -->
<nav class="navbar fixed">
<div class="nav-group">
<a class="brand" href="#">Torq</a>
<ul class="nav-menu">
<li><a href="navbar.html">Standard</a></li>
<li class="active"><a href="navbar-fixed.html">Fixed</a></li>
<li><a href="static-top.html">Static Top</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown <i class="caret"></i></a>
<ul class="dropdown-menu caret">
<a href="#"><li>Action</li></a>
<a href="#"><li>Another action</li></a>
<a href="#"><li>Something else</li></a>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<a href="#"><li>Separated link</li></a>
<a href="#"><li>One more separated link</li></a>
</ul>
</li>
</ul>
</div>
<div class="nav-group">
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
</nav>
<div class="hero">
<h1>Fixed Navbar Demo</h1>
<p>This navbar stays at the top as you scroll down.</p>
</div>
<!-- Add content to demonstrate scrolling -->
<div style="height: 300vh; padding: 20px;">
<h2>Scroll down</h2>
<p>The navbar remains fixed at the top.</p>
</div>
</div>
<script src="../js/navbar.js"></script>
</body>
</html>

6
tests/navbar.html
View File

@ -15,11 +15,11 @@
<!-- Standard Navbar --> <!-- Standard Navbar -->
<nav class="navbar"> <nav class="navbar">
<div class="nav-group"> <div class="nav-group">
<a class="brand" href="#">MakoCSS</a> <a class="brand" href="#">Torq</a>
<ul class="nav-menu"> <ul class="nav-menu">
<li class="active"><a href="standard.html">Standard</a></li> <li class="active"><a href="navbar.html">Standard</a></li>
<li><a href="fixed.html">Fixed</a></li> <li><a href="navbar-fixed.html">Fixed</a></li>
<li><a href="static-top.html">Static Top</a></li> <li><a href="static-top.html">Static Top</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown <i class="caret"></i></a> <a href="#" class="dropdown-toggle">Dropdown <i class="caret"></i></a>