Unite thema mobiel menu kleur | WordPress.org Nederlands

Job
(@angryjob)

9 jaren, 1 maand geleden

Hey allemaal,

Ik ben momenteel bezig voor kennissen van mij met de nieuwe website van hun fittersbedrijf. (Hun huidige site: http://www.c-ris.nl) De site die ik aan het maken ben is demo01.avobyte.nl

Als je deze op je mobiel bezoekt, of gewoon het venster smaller maakt, dan krijg je het menu responsive. Maar de kleurencombinatie werkt niet echt, het is voor sommigen slecht zichtbaar en valt gewoon niet te veel op. Aangezien ik zuig in CSS, en de theme developer niet al te snel is qua support vraag ik het hier:

Hoe maak ik het icoontje van het mobiele menu wit (of een andere kleur) en is het mogelijk om links hiervan neer te zetten: ‘Menu’.

Bedankt!

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)

(@beginnenmetwp)

Dag Job,

Dat kun je doen door de style.css van het thema te bewerken. Hier staat een class .navbar-toggle in (die moet je dus even zoeken). Daar staat een property background-color in die je aan kunt passen. Let wel op dat deze class misschien nog wel ergens anders wordt gebruikt, waardoor je ook die knoppen aanpast.

Desnoods kun je de button in kwestie in de code een eigen class geven en deze oppakken in je CSS, maar dat is iets meer werk.

Thread starter

Job

(@angryjob)

9 jaren, 1 maand geleden

Beste BeginnenmetWP,

Hartelijk bedankt voor je snelle reactie,

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

heb ik nu veranderd naar:

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #FFFFFF;
}

Als ik nu met mijn muis (op smalle PC weergave) over het icoon ga dan wordt deze inderdaad licht qua achtergrond. Maar op mobiel en wanneer ik niet ‘hover’ dan blijft het nog steeds hetzelfde, logisch ook maar wat heb ik hier verkeerd gedaan?

Het volledige stuk van style.css wat over het menu gaat:

/* =Navigation
----------------------------------------------- */

.site-main [class*="navigation"] a,
.more-link {
	border: 1px solid #DDD;
	padding: 6px 12px;
	border-radius: 4px;
	display: block;
}
.site-main [class*="navigation"] a:hover,
.more-link:hover {
  color: #fff;
  background: #54397E;
  text-decoration: none;
}
.more-link {
  float: right;
  margin: 10px 0;
}
.site-main [class*="navigation"] {
	margin: 0 0 1.5em;
	overflow: hidden;
}
[class*="navigation"] .nav-previous {
	float: left;
}
[class*="navigation"] .nav-next {
	float: right;
	text-align: right;
}
.navbar.navbar-default {
  background-color: #54397E;
  font-weight: 200;
}
.navbar-default .navbar-nav > li > a {
  color: #fff;
  border-right: 1px solid rgba(0,0,0,.2);
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.10);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	border-right: 1px solid rgba(0,0,0,.2);
	border-left: none;
}
.navbar {
	border-radius: 0;
}
.navbar-default {
	border: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
	color: #fff;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu > li > a {
	padding: 18px 20px;
	color: #fff;
}
.dropdown-menu,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
	background-color: #54397E;
	border: none;
}
.dropdown-menu .divider {
	background-color: rgba(0, 0, 0, 0.1);
}
.navbar-nav > li > .dropdown-menu {
	padding: 0;
}
.navbar-nav > li > a {
	padding-top: 18px;
	padding-bottom: 18px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #FFFFFF;
}

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)

Het onderwerp ‘Unite thema mobiel menu kleur’ is gesloten voor nieuwe reacties.

Weergaven