WordPress

css — menu nagłówka na stałe rozwinięte w motywie responsywnym nagłówka

  • 20 lutego, 2024
  • 3 min read
css — menu nagłówka na stałe rozwinięte w motywie responsywnym nagłówka


Minęło dużo czasu, odkąd bawiłem się administratorem WordPressa i stylem/motywem i odkryłem, że menu nagłówka mojej witryny jest trwale rozwinięte i pokazuje wszystkie podmenu. Używam motywu responsywnego. Ma być pionowo, a podmenu pojawia się po najechaniu myszką. Nie jestem pewien, czy jest to ustawienie w motywie, czy CSS.

Każda pomoc byłaby bardzo mile widziana 🙂

wprowadź tutaj opis obrazu

wprowadź tutaj opis obrazu

  body {
background:none !important;
color:#1a273b !important;
}

#wrapper {
 margin: 0px auto 20px auto;
  padding: 0 20px 20px 20px;
  border: none;
  border-radius:0;
  background:none !important;
}

.front-page #wrapper {
  margin: 0px auto 20px auto;
  padding: 0;
  border: none;
  border-radius:0;
  background:none !important;
}

html {
  background: #1e5799;
  background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#7db9e8",GradientType=0 );
  background-attachment: fixed;
}


.top-widget {
background: none;
border: none;
clear: right;
width:960px;
padding: 0;
}

#top-widget .widget-title {
display:none;
}

#featured, #featured-content, #featured-title, #featured-subtitle {
display:none;
}

#widgets {
  margin-top: 0 !important;
}
.widget-wrapper {
background:none !important;
border:none !important;
padding:0 !important;
margin:0 !important;
}

#home_widget_1, #home_widget_2, #home_widget_3 {
margin:0 !important;
padding:0 !important;
width:320px !important;
}

.smooth_slider {
padding: 0 !important; 
}

.menu {
  clear: both;
  margin: 0 auto;
  background-color: #1a273b;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2C3E5A), to(#1a273b));
  background-image: -webkit-linear-gradient(top, #2C3E5A, #1a273b);
  background-image: -moz-linear-gradient(top, #2C3E5A, #1a273b);
  background-image: -ms-linear-gradient(top, #2C3E5A, #1a273b);
  background-image: -o-linear-gradient(top, #2C3E5A, #1a273b);
  background-image: linear-gradient(top, #2C3E5A, #1a273b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2C3E5A, endColorstr=#1a273b);
}

.menu a:hover {
  color: #fff;
  background-color: #0F1722;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#131C2A), to(#0F1722));
  background-image: -webkit-linear-gradient(top, #131C2A, #0F1722);
  background-image: -moz-linear-gradient(top, #131C2A, #0F1722);
  background-image: -ms-linear-gradient(top, #131C2A, #0F1722);
  background-image: -o-linear-gradient(top, #131C2A, #0F1722);
  background-image: linear-gradient(top, #131C2A, #0F1722);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#131C2A, endColorstr=#0F1722);
}

.menu .current_page_item a {
  color: #fff;
  background-color: #0F1722;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#131C2A), to(#0F1722));
  background-image: -webkit-linear-gradient(top, #131C2A, #0F1722);
  background-image: -moz-linear-gradient(top, #131C2A, #0F1722);
  background-image: -ms-linear-gradient(top, #131C2A, #0F1722);
  background-image: -o-linear-gradient(top, #131C2A, #0F1722);
  background-image: linear-gradient(top, #131C2A, #0F1722);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#131C2A, endColorstr=#0F1722);
}

.powered {
  display: none !important;
}

a h1 {
color:#1a273b !important;
}

h3 {
font-size:1.0em !important;
}

a {
color:#ccc !important;
}

.nav-region a:link, .nav-region a:active, .nav-region a:visited {
color:#1a273b !important;
font-weight:normal !important;
}

.nav-region a:hover {
color:#cccccc !important;
}

a.weblink {
display:block !important;
background:#1a273b !important;
color:#cccccc !important;
width:64px !important;
padding: 3px 3px 3px 8px !important;
}

a.weblink::after {
content:"  ›";
}

a.weblink:hover {
background:#1a3661 !important;
color:#fff !important;
}


ul.social-icons {
float:right;
list-style:none;
}

.sub-menu a {
color:#666 !important;
}


Źródło

Warto przeczytać!  https - za dużo przekierowań - WordPress Development Stack Exchange