DopeyCode/marmeladenladen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

media queries to css - slight changes to main nav

Browse Source
This commit is contained in:
StockiP
2022-04-19 20:47:37 +02:00
parent 863ee03c7a
commit 7f315add85
2 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/main_nav.html
View File

@@ -37,6 +37,14 @@
<a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
<i class="fa fa-fw fa-search text-dark mr-2"></i>
</a>
<a class="nav-icon position-relative text-decoration-none" href="#">
<i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
</a>
<a class="nav-icon position-relative text-decoration-none" href="#">
<i class="fa fa-fw fa-user text-dark mr-3"></i>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
</a>
</div>
</div>
</div>

28
res/css/style.css
View File

@@ -1,3 +1,18 @@
/* Colors */
.logo { font-weight: 500 !important;}
.text-warning { color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #d86f23 !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #d86f23!important;}
.btn-success {
background-color: #d86f23 !important;
border-color: #ba5c19 !important;
}
/* Navbar */
#top_nav_bar { min-height: 40px;}
#top_nav_bar * { font-size: .9em !important;}
@@ -27,3 +42,16 @@
transition: .5s;
}
#marmeladenladen_footer .border-light { border-color: #2d343f !important;}
/* Medium devices */
@media (min-width: 768px) {
#main_nav_bar .navbar-nav {max-width: 450px;}
}
/* large devices */
@media (min-width: 992px) {
#main_nav_bar .navbar-nav {max-width: 550px;}
}
/* larger devices */
@media (min-width: 1200px) {}