How to customize header and footer

Sparkling
1

Good Day! I’m having a problem with the header and footer.
I’m using elementor by the way with template setting Full width Standard. Which means I’m only using the header & footer of the Sparkling theme.

How do I change the font size and style of the header menu? I don’t see any options on wordpress customization.
And my logo, I can’t seem to align it in the middle of the header bar…

As for the footer how do I increase the height? and there seems to be a black line I don’t know why…
I also want to delete the text here, and put my logo and other links, I’ve attached a screenshot.

This is my site: http://www.thesolodrifter.com/

2

Hi @aiiah,

I hope you are well today and thank you for your questions.

How do I change the font size and style of the header menu? I don’t see any options on wordpress customization.

You can change it by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.navbar-default .navbar-nav > li > a {
    font-size: 14px;
    font-style: italic;
}
And my logo, I can’t seem to align it in the middle of the header bar…

To align it use the following custom CSS code.

.navbar-header {
    float: none;
    display: table;
    margin: 0 auto;
}
As for the footer how do I increase the height? and there seems to be a black line I don’t know why..

Use below CSS code to achieve this.

footer#colophon {
    border: 0;
    padding: 20px 0;
}
I also want to delete the text here, and put my logo and other links, I’ve attached a screenshot.

Try adding them in the theme footer widget areas as shown in the attached screenshot.

Best Regards,
Movin

3

Thank you very much for the instructions it helped a lot. Though I still have some questions…

For the footer, how can I adjust the height? is there a way where I can play with their height? I attached a screenshot
and…well it shows too much gray, I want it a bit shorter…

And for the header how can I change the menu to other typography? for example, an Oswald from Google Font.

Site link: http://www.thesolodrifter.com/

4
For the footer, how can I adjust the height? is there a way where I can play with their height? I attached a screenshot and…well it shows too much gray, I want it a bit shorter…

You can play with the height using the following CSS code and adjusting the value 10 in it.

footer.custom-footer {
    padding: 10px 0;
}
And for the header how can I change the menu to other typography? for example, an Oswald from Google Font.

You can use any of the following solutions to use Google font for it.

5

Thanks very much Movin! Your instructions are a great help to me

6

You are most welcome here :slight_smile: