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