CSS

Om du menar pilarna som visar att det finns en undermeny, så kan du göra dem svarta med följande rad:

.primary-menu .icon::before, .primary-menu .icon::after {
    background-color:   #000;
}

Tryck upp menyn närmare sidstarten:

.header-inner {
    padding: 1rem 0;
}

Komprimera rubrikraderna och få dem att flyta bättre:

.header-titles .site-title, .header-titles .site-logo, .header-titles .site-description {
    margin: 0;
}

Detta är vad jag kan hitta för stunden.

.singular .entry-header {
    padding: 0;
}

Ett ställe jag ständigt återkommer till är https://www.w3schools.com/css/
Men via Google går det att hitta mycket.
Sedan kan man i både Firefox och Chrome undersöka html/css för olika sidor och experimentera själv med hur webbläsaren skulle reagera på några extra rader CSS. Det just det jag använder när jag kikar på din webbplats, t.ex. (Högerklicka och ”inspect element” i Firefox)

Låt oss se vad du har som ”Extra CSS” just nu. Det är enkelt att se eftersom det helt enkelt länkas in på ett visst ställe i din html-kod:

.entry-content > p:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: 800px;
}
.home #site-content .entry-header {
padding-top: 0px;
}
@media (min-width: 700px) {
.site-logo img { max-height: 120px; }
}
#site-header .primary-menu li a {
font-size: 22px;
}
body:not(.overlay-header) .primary-menu > li > a {
color: #000;
}
/*** screen smaller than 700px ***/
h1, .heading-size-1 { font-size: 3.6rem; }
/*** screen between 700px to 1219px ***/
@media (min-width: 700px) {
h1, .heading-size-1 { font-size: 6.4rem; }
}
/*** screen 1220px and bigger ***/
@media (min-width: 1220px) {
h1, .heading-size-1 { font-size: 8.4rem; }
}
@media (min-width: 1000px) {
#site-header > .header-inner {
flex-direction: column;
}
.header-titles-wrapper {
margin: 3rem 0;
order: 1;
}
.header-titles {
justify-content: center;
margin: 0;
}
}
#site-content .entry-header {
padding-bottom: 0px;
}
#site-content .post-inner {
padding-top: 10px;
}
.primary-menu .icon::before, .primary-menu .icon::after {
background-color:   #000;
}
.header-inner {
padding: 1rem 0;
}
.header-footer-group .header-inner {
padding-bottom: 0px;
}
.header-titles .site-title, .header-titles .site-logo, .header-titles .site-description {
margin: 0;
}
.singular .entry-header {
padding: 0;
}

Du får så stor rubrik på sidan du pekar till eftersom du i avsnittet som börjar med /*** screen smaller than 700px ***/ anger ganska stor textstorlek för alla h1-taggar. Jag undrar var du hittade den inställningen någonstans. Tidigare i denna tråd ”målade vi över” den inställningen med en mer specifik CSS-klass (eller snarare kombination av CSS-klasser) för just startsidan. font-size 8.4rem är stort…

Här är en artikel som berättar mer om hur man kan kombinera klasser/id/taggar för att skapa specifika CSS-regler:
https://css-tricks.com/multiple-class-id-selectors/

Någonstans på W3schools tror jag att jag läste om prioriteringsordning för situationer när olika CSS-regler ger motstridiga instruktioner (grundregeln är att ”mest specifik regel vinner”.)