Jumbotron image size, menu, font questions

Good day

I dont use buttons or text in the jumbotron image, and now it is a very small and narrow bar at the top only - how do I get it to display the whole image? I have seen other people ask on here how to resize it, I have tried that in the additional CSS, but no luck.

Is it possible to have the menu in a white bar ABOVE the jumbotron image, and not in the image itself, and can the social media icons also be displayed there? And I would like the menu to be in the centre, not off center as now

Then, I want the whole site one font type, menu included, to be Nunito. I am helping a friend with this site, and she is very spesific on these things - I like the theme very much, and would like to use it, but if these things cannot be done, I will have to look for other options, and I dont want to - used this theme before, and it is really great!

Jaco

Hello there,

I hope you are doing well today.

In order to assist you here I would like to view the page so that I can edit the CSS on your site. Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

Good day

here is the link - http://http://hdmakeupartist.co.za/

Hello there,

I hope you are doing well today.

Please try out the following CSS code:


/*Jumbotron height*/
#header.header-front-page {
    height: 100%;
}

/*Nav bar*/
#header .top-header {
    padding-top: 0px;
    background-color: white;
}

#header .top-header .header-navigation ul li a {
    color: #000;
}

/*Body font*/
body {
    font-family: Nunito;
}

Best Regards,
Support

Thank you very much, that helped a lot. Slowly but surely learning code myself, so it is nice to see how things are done I did not know about

For now, 2 last questions. Can the menu be center aligned, with the social media icons on the right of the menu? (I think it will only be Facebook, Twitter and Instagram)

Thank you so much for your help already

Okay, I got the menu more center on my own (not the correct way, but I am trying), by removing the logo part. Still not helping.

Where am I going wrong?

.col-xs-8 {
display: none;
width: 66.66666667%;
}