Het logo is het merkidentiteit van een website. Standaard wordt het altijd linksboven op elke pagina weergegeven. Dit kan worden gewijzigd door een andere headerindeling te kiezen.
Hieronder kan je zien hoe en waar je het logo zelf eenvoudig kan aanpassen.
Logo zwevend maken LET OP! Doe dit alleen als je bekend met met CSS
Als je het logo zwevend wil maken, dan kan je handmatig aanvullende CSS toevoegen. Doe dit alleen als je bekent bent met CSS. Bij een verkeerd gebruik kunnen andere elementen omvallen. Indien jullie kennis beperkt is, vraag dit via een ticket aan AllUnited, wij helpen je graag.
Resultaat
De CSS voeg je hier toe: Menu YOOtheme > Settings > CSS
Deze CSS is specifiek voor alle schermen groter dan een iPad. Waarom dan 1400px: de grootste iPad (Pro 12.9") heeft in liggende stand een CSS-breedte van 1366px. Door de grens op 1400px te leggen, blijft die en alle kleinere iPads buiten schot, en werkt het effect alleen op laptop/desktop-schermen daarboven.
------------------------------------------
/* Maak mijn logo zwevend */
@media (min-width: 1400px) {
/* Container van de header iets ruimte geven zodat het logo niet wordt afgesneden */
.uk-navbar-container {
position: relative;
overflow: visible;
}
/* Logo laten zweven boven het menu */
.uk-logo {
position: relative;
z-index: 20;
margin-bottom: -80px; /* compenseert de layout-hoogte eronder */
}
/* Zorg dat het logo-plaatje zelf een vaste, iets grotere hoogte krijgt */
.uk-logo img {
height: auto;
width: 200px!important; /* hier overschrijf je de grootte van het logo, laat de breedte en hoogte bij het logo zelf leeg*/
}
}
--------------------------------------------
Was dit artikel nuttig?
Dat is fantastisch!
Hartelijk dank voor uw beoordeling
Sorry dat we u niet konden helpen
Hartelijk dank voor uw beoordeling
Feedback verzonden
We stellen uw moeite op prijs en zullen proberen het artikel te verbeteren