Menu in static pages and blog white default menu text color and white background

Illdy
#1

First of all i really enjoy the theme! Would it be possible to use google font raleway as font for titles and body text?

The menu on static pages is white as default color, which works out fine on our homepage since the jumbo hero image covers the whole area and the white menu works great.
See: http://roundtable3.sg/.

On static pages and blog, there is a white header and 100px below starts the background image for blog and such.
Since the menu text default is white. you don’t see the menu. How can I customize the setting in such a way that the background image for static pages and blog start at the top (including moving the page title also little up).
See: http://roundtable3.sg/news/journey-singapore-round-table-3/

Looking forward to your reply.

#2

Hi,

Go to Appearance -> Customize -> Additional CSS and add this CSS, it will change the menu top links color to something else in the pages other than home page.

.single #menu-menu li a {
    color: rebeccapurple !important;
}

Change rebeccapurple to your fav color.

Let us know,

Thanks,
laranz.

#3

Great, that worked, appreciate your quick reply!
How can i customise the font (headings and body) to google font: raleway?
is it possible to change the size as well?

#4

the menu colors work for blog post, but not for static pages.
See page; http://roundtable3.sg/round-table-international/

#5

Hi,

  1. To support pages too remove the old CSS and add this one,
.single #menu-menu li a, .page #menu-menu li a {
    color: rebeccapurple !important;
}
  1. For changing fonts, use this Custom CSS,
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/QAUlVt1jXOgQavlW5wEfxQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
.single #menu-menu li a, .page #menu-menu li a {
    font-family: 'Raleway';
  font-size: 20px !important;;
}

Change the font size according to your needs.

Let us know,

Thanks,
laranz.

#6

Thanks, both works!
How do i add h1, h2, h3, different sizes to the custom css?

#7

Hello there,

I hope you are doing well today.

You can use the following CSS to change the font sizes:

h1, h2, h3 { font-family: 'Raleway'; font-size: 20px ;; }

Best Regards,
Support