meltedmoon Novice
12. maj 2020 - 13:37 Der er 4 kommentarer og
2 løsninger

CSS til fixed top

Hej, jeg har en Wordpress-side hvor jeg gerne vil have min topmenu til at være fixed, så den altid sidder i toppen selvom man scroller ned ad siden.

Det burde kunne lade sig gøre ved at smide noget custom CSS ind, men jeg kan ikke få det til at virke. Er der nogen der kan hjælpe? Det drejer sig om denne side: www.desinfektionplus.dk
Slater Ekspert
12. maj 2020 - 14:35 #1
Jaeh,  hvis du bare sætter din .header til position: fixed;

Så skal du nok også give den et manuelt z-index for at den stadig er synlig, en width: 100%, fordi position fixed er låst til inline, og evt. tilføje en margin-top på headerens højde til dit .content for at det ikke forsvinder ind bag headeren, men ellers er det bare det.
meltedmoon Novice
12. maj 2020 - 14:38 #2
Har du mulighed for at skrive selve css-koden jeg skal indsætte? Jeg er ikke så skrap til det
Slater Ekspert
12. maj 2020 - 14:48 #3
Prøv med:

.header {
  position: fixed;
  width: 100%;
  z-index: 10;
}
#content {
  margin-top: 80px;
}

og så nok lige et media query med, for at den også virker på mobil, hvor headeren er mindre:

@media (max-width: 960px) {
  #content {
    margin-top: 50px;
  }
}
meltedmoon Novice
12. maj 2020 - 14:49 #4
Fandt ud af det til den normale skærmstørrelse, men på mobil, er topmenuen lidt lavere, så content'en skal være mindre... hvordan sørger jeg for det?
Slater Ekspert
12. maj 2020 - 14:52 #5
Nåede du at se kommentaren før?
meltedmoon Novice
12. maj 2020 - 14:53 #6
Super! Det virker - mange tak!
Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links

Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





Premium
Test: Apples nye iPhone er bygget til fart og stil: Så gode er iPhone 12 og iPhone 12 Pro
Computerworld tester: IPhone 12 og iPhone 12 Pro er bygget til fart og til at se godt ud. Varen leveres stilsikkert, men noget er overset i farten.
Computerworld
Salling Group lukker stor online-satsning efter kun et år
Millionsatsningen Fillop lukker ved årets udgang. I stedet er supermarkeds-giganten Salling Group nu på vej med en række helt nye online-satsninger, der er affødt af coronakrisen.
CIO
Podcast: Hos Viking Life-Saving Equipment er it gået fra at være backend til at være noget, som kunderne spørger aktivt efter
Podcast, The Digital Edge: Viking leverer en stadig større del af deres produkt som en tjeneste. Som en del af tjenesten tager Viking ansvar for sikkerheden ved at levere, dokumentere og vedligeholde det nødvendige sikkerhedsudstyr. Hør hvordan Henrik Balslev senior digital director hos Viking har løftet den opgave.
Job & Karriere
Regner din ferie væk? Brug tiden på at søge en af disse otte stillinger, der er ledige netop nu
Det sjasker ned over hele Danmark. Du kan bruge de våde sommerdage på at søge et af disse otte job, der er ledige lige nu.
White paper
Optimér produktiviteten og lad din printer følge med ud i skyen
De fleste virksomheder investerer betydelige beløb i den digitale transformationsproces, men skriver alligevel dokumenter ud som aldrig før, og medarbejdere opfatter decideret print som en forudsætning for at kunne arbejde effektivt. Alligevel er virksomhedens printstruktur ofte et systemmæssigt stedbarn, der er sammenstykket af mange forskellige enheder og platforme – hvilket skaber forvirring og betydeligt tidsspilde. Print passer heller helt ind i hverken den eksisterende digitale infrastruktur eller i den cloudbaserede infrastruktur, virksomheden sigter mod. Det udfordrer både sikkerhed, produktivitet og digital strategi som hele. I denne hvidbog kan du læse om udfordringerne og om, hvordan du håndterer dem mest effektivt som et led i den digitale transformationsproces.