Hallo, meine Frage lautet, wie kann ich die breite und höhe der Menüleiste meiner Website ändern Einerseits ohne scrollen und andererseits beim scrollen? Und wie kann ich das Logo während dem Scrollen größer darstellen?
Hier meine Website: https://setup-tipps.com und unten der Code:
Habe schon einige Dinge versucht, allerdings ändert sich irgendwie nichts.
Vielen Dank für deine Hilfe:)
Phil
Code
8.2 - Header Menu
--------------------------------------------------------------*/
/* Header Menu */
.site-header-menu {
display: none;
}
/*--------------------------------------------------------------
8.3 - Header Menu Responsive
--------------------------------------------------------------*/
/* Toogle Menu */
.toggle-menu-wrapper a, .toggle-menu-wrapper a:visited {
color: #020202;
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.main-navigation.stuck .toggle-menu-wrapper a, .main-navigation.stuck .toggle-menu-wrapper a:visited {
color: #fff;
}
.toggle-menu-wrapper a:hover, .toggle-menu-wrapper a:focus, .toggle-menu-wrapper a:active {
color: #3d3d3d;
}
.main-navigation.stuck .toggle-menu-wrapper a:hover, .main-navigation.stuck .toggle-menu-wrapper a:focus, .main-navigation.stuck .toggle-menu-wrapper a:active {
color: #a6a6a6;
}
.toggle-menu-wrapper a:before {
content: "\f0c9";
font-size: 25px;
font-size: 1.5625rem;
vertical-align: middle;
}
.toggle-menu-wrapper .toggle-menu-label {
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 700;
margin: 0 5px;
margin: 0 0.3125rem;
text-transform: uppercase;
}
/* Body Control */
body.has-responsive-menu {
overflow: hidden;
}
/* Site Header Menu Responsive */
.site-header-menu-responsive {
background: #141414;
color: #fff;
margin: 0;
overflow: hidden;
overflow-y: auto;
padding: 30px;
padding: 1.875rem;
position: fixed;
top: 0;
left: -280px;
width: 280px;
height: 100%;
z-index: 99999;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.site-header-menu-responsive.show {
left: 0;
}
.site-header-menu-responsive .header-menu-responsive-close {
color: #fff;
cursor: pointer;
font-size: 35px;
font-size: 2.1875rem;
line-height: 1;
position: absolute;
top: 5px;
right: 15px;
}
.site-header-menu-responsive .header-menu-responsive-close:hover {
color: #a6a6a6;
}
/* Responsive Menu: (375px) and up */
@media (min-width: 375px) {
.site-header-menu-responsive {
left: -335px;
width: 335px;
}
}
/* Responsive Menu: (414px) and up */
@media (min-width: 414px) {
.site-header-menu-responsive {
left: -375px;
width: 375px;
}
}
/* Header Menu Responsive */
.header-menu-responsive {
list-style: none;
margin: 0 auto;
padding: 0;
}
.header-menu-responsive * {
list-style: none;
margin: 0;
padding: 0;
}
.header-menu-responsive ul {
display: none;
margin-left: 24px;
margin-left: 1.5rem;
}
.header-menu-responsive ul.toggle-on {
display: block;
}
.header-menu-responsive li {
position: relative;
word-wrap: break-word;
white-space: normal;
}
.header-menu-responsive li.current_page_item a,
.header-menu-responsive li.current-menu-item a,
.header-menu-responsive li.current_page_ancestor > a,
.header-menu-responsive li.current-menu-ancestor > a,
.header-menu-responsive li.current-menu-parent > a {
color: #a6a6a6;
}
.header-menu-responsive a, .header-menu-responsive a:visited {
color: #fff;
display: block;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 700;
padding: 8px 0;
padding: 0.5rem 0;
text-transform: uppercase;
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.header-menu-responsive a:hover, .header-menu-responsive a:focus, .header-menu-responsive a:active {
color: #a6a6a6;
}
.header-menu-responsive .dropdown-toggle {
background: transparent;
border: none;
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
}
.header-menu-responsive .dropdown-toggle:after {
font-size: 16px;
font-size: 1rem;
color: #fff;
content: "\f078";
}
.header-menu-responsive .dropdown-toggle.toggle-on:after {
content: "\f077";
color: #a6a6a6;
}
.header-menu-responsive .page_item_has_children > a,
.header-menu-responsive .menu-item-has-children > a {
padding-right: 40px;
padding-right: 2.5rem;
}
Alles anzeigen