Menuen driller mig - WordPress

Hej Amino'er,

Jeg sidder pt. og arbejder på en menulinje, som jeg desværre har nogen problemer med.

Hjemmesiden er kan findes på fbv.dk

(1) Når du går ind på siden, så står teksten 'FORSIDE' i menulinjen med en grå farve, selvom den gerne skulle være hvid. Hvad skal jeg skrive i min Custom CSS for at gøre den hvid?

(2) Som det ser ud nu, så fylder menulinjen kun 960px. Hvordan får jeg den til at fylde helt ud til den grå baggrund? Hvad skal jeg skrive i min Custom CSS?

(3) Som du nok kan se, så står mit header-billede lige oven i menulinjen. Kan jeg lave et mellemrum ml. billede og menulinje? 

(4) Når man holder musen over en fane i menulinjen, så bliver den hvid - men desværre kun i tekstområdet. Kan du fortælle mig, hvordan jeg kan gøre, så der kommer afstand i siderne, som f.eks. siden her?

Jeg håber, at der er en amino, der kan fortælle mig, hvad jeg skal skrive i min Custom CSS for at løse problemerne :-)

God aften til jer alle!

Med venlig hilsen

Patrick

Lars:

/* Gør det aktive menupunk hvidt */
#masthead .main-navigation .current-menu-item > a {
color: #fff;
}

Super, det virker helt perfekt!

Lars:

/* Tilfør "padding" til menupunkter */
#masthead .main-navigation a {
padding: 0 10px;
}

Virker umiddelbart også fint, men ser lidt skævt ud mht. til ''marginen'' i hhv. højre og venstre side af menuen.

Lars:

/* Stræk menuen helt ud til siderne og tilfør mellemrum imellem menu og logo */
#masthead #site-navigation {
margin: 30px 0 0 -40px;
padding: 0 40px;
}

Virker godt, men ligesom ovenstående tilfælde, ser det lidt skævt ud. Hvordan får jeg det hele centreret? :-)

Lars:

/* Sør for at vi kun strækker menuen når siden ses på desktops og ikke på tablets og smartphones */
@media only screen and (min-width : 1224px) {

Denne har jeg endnu ikke prøvet, men kan du forklare mig meningen med de 1224px, og hvad denne kode gør helt præcist? :-)

Super hjælp, Lars! Takker dig rigtig meget - 5 stjerner herfra!

Med venlig hilsen

Patrick

Hej igen Patrick,

Godt at det virker - for det meste i hvert fald, lad os se om vi kan få rettet det sidste også :)

Patrick:

Lars:

/* Tilfør "padding" til menupunkter */
#masthead .main-navigation a {
padding: 0 10px;
}

Virker umiddelbart også fint, men ser lidt skævt ud mht. til ''marginen'' i hhv. højre og venstre side af menuen.

Lars:

/* Stræk menuen helt ud til siderne og tilfør mellemrum imellem menu og logo */
#masthead #site-navigation {
margin: 30px 0 0 -40px;
padding: 0 40px;
}

Virker godt, men ligesom ovenstående tilfælde, ser det lidt skævt ud. Hvordan får jeg det hele centreret? :-)

Hmm.. når jeg ser ændringerne du nu har tilføjet her på min skærm synes jeg det ser fint ud, så er lidt i tvivl. Du kan prøve med følgende, hjælper det dig?

#masthead #site-navigation .nav-menu {
margin: 0 auto;
}

Patrick:

Lars:

/* Sør for at vi kun strækker menuen når siden ses på desktops og ikke på tablets og smartphones */
@media only screen and (min-width : 1224px) {

Denne har jeg endnu ikke prøvet, men kan du forklare mig meningen med de 1224px, og hvad denne kode gør helt præcist? :-)

Det er en "media-query" (som er en del af CSS3). Det som den gør er at den sikrer at de ændringer vi laver på din menu (som ligger inden for media-queriens { } kun påvirker din menu når den ses på en skærm der er bredere end 1224px.

Så dybest skal du læse den sådan her:

@media - her starter vi vores query

only screen - vi fortæller browseren at dette kun gælder for mediet "screen" dvs. skærme og ikke for eksempel "print", ("only" er bare anbefalet ifht. gamle browsere)

and (min-width : 1224px) { - vi fortæller browseren at denne query kun skal gælde for skærme der har en minimumsbredde på 1224px.

Husk på at folk der besøger din hjemmeside i dag kan benytte meget andet end traditionelle computere, såsom smartphones og tablets mv. Det tema som din side bygger på er WordPress' "TwentyTwelve" og dette er bygget "responsivt" som det hedder, hvilket vil sige at temaet automatisk tilpasser sig til den skærmbredde som det bliver set på.

Med andre ord, din side vil opleves forskelligt (og mest optimalt) alt efter om du ser den på din PC derhjemme eller på din iPhone eller et andet device. Du kan lære mere om media-queries og responsivt webdesign her: http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/ (og en masse andre steder)

Mvh. Lars