tech-masters/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navbar styles for improved responsiveness and visual consistency, including z-index adjustments, background color changes on scroll, and padding updates.

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-05-14 23:28:38 +03:00
parent f62368672d
commit 595a1e6bc5
1 changed files with 33 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
css/templatemo-first-portfolio-style.css
View File

@@ -306,43 +306,25 @@ strong {
.navbar { .navbar {
background: transparent; background: transparent;
position: fixed; position: fixed;
z-index: 9; z-index: 999;
right: 0; right: 0;
left: 0; left: 0;
transition: all 0.3s; transition: all 0.3s ease;
padding-top: 15px; padding: 15px 0;
padding-bottom: 0;
} }
.is-sticky { .navbar.scrolled {
background: var(--white-color); background: rgba(83, 93, 161, 0.95);
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);
padding-top: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding-bottom: 10px; padding: 10px 0;
}
.is-sticky .navbar-brand,
.is-sticky .navbar-brand:hover {
color: var(--dark-color);
}
.is-sticky .navbar-nav .nav-link {
color: var(--p-color);
}
.is-sticky .navbar .custom-btn {
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.is-sticky .navbar .custom-btn:hover {
background: var(--secondary-color);
color: var(--white-color);
} }
.navbar .container { .navbar .container {
background: transparent;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
padding: 10px 25px; padding: 10px 25px;
transition: all 0.3s ease;
} }
.navbar-brand { .navbar-brand {
@@ -356,11 +338,11 @@ strong {
color: var(--secondary-color); color: var(--secondary-color);
} }
.is-sticky .navbar-brand { .navbar.scrolled .navbar-brand {
color: var(--primary-color); color: var(--white-color);
} }
.is-sticky .navbar-brand:hover { .navbar.scrolled .navbar-brand:hover {
color: var(--secondary-color); color: var(--secondary-color);
} }
@@ -378,8 +360,7 @@ strong {
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
text-transform: uppercase; text-transform: uppercase;
position: relative; position: relative;
padding-top: 15px; padding: 15px 20px;
padding-bottom: 15px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@@ -387,11 +368,11 @@ strong {
color: var(--secondary-color); color: var(--secondary-color);
} }
.is-sticky .navbar-nav .nav-link { .navbar.scrolled .navbar-nav .nav-link {
color: var(--primary-color); color: var(--white-color);
} }
.is-sticky .navbar-nav .nav-link:hover { .navbar.scrolled .navbar-nav .nav-link:hover {
color: var(--secondary-color); color: var(--secondary-color);
} }
@@ -399,16 +380,16 @@ strong {
content: ""; content: "";
background: var(--secondary-color); background: var(--secondary-color);
position: absolute; position: absolute;
bottom: 6px; bottom: 10px;
right: 0; right: 20px;
left: 0; left: 20px;
width: 0; width: 0;
height: 2px; height: 2px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.navbar-nav .nav-link:hover::after { .navbar-nav .nav-link:hover::after {
width: 100%; width: calc(100% - 40px);
} }
.navbar-toggler { .navbar-toggler {
@@ -1286,21 +1267,22 @@ strong {
padding: 8px 16px; padding: 8px 16px;
} }
.navbar .container { .navbar {
background: var(--white-color); background: var(--white-color);
padding: 10px 0;
} }
.navbar-brand, .navbar .container {
.navbar-brand:hover { background: transparent;
color: var(--dark-color);
} }
.navbar-icon { .navbar-brand {
background: var(--secondary-color); color: var(--primary-color);
color: var(--white-color); }
width: 44px;
height: 44px; .navbar-nav .nav-link {
line-height: 44px; color: var(--primary-color);
padding: 10px 0;
} }
.navbar .custom-btn { .navbar .custom-btn {
@@ -1308,22 +1290,6 @@ strong {
color: var(--secondary-color); color: var(--secondary-color);
} }
.navbar-toggler .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
background: var(--dark-color);
}
.navbar-expand-lg .navbar-nav .nav-link {
margin-left: 0;
}
.navbar-nav .nav-link {
color: var(--p-color);
padding-top: 10px;
padding-bottom: 10px;
}
.hero { .hero {
padding-top: 200px; padding-top: 200px;
padding-bottom: 400px; padding-bottom: 400px;
@@ -1570,7 +1536,7 @@ html {
} }
.navbar.scrolled { .navbar.scrolled {
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(83, 93, 161, 0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.1); box-shadow: 0 2px 10px rgba(0,0,0,0.1);
} }