Customizing header & footer

Shapely
1

Hi,

First, thanks for this stylish and beautiful theme.
I would like to adjust following things in header and footer:

  • remove the search icon in the header
  • reduce the height of header
  • reduce the height of footer
  • change the color of header
  • make the header half transplant

Are there custom CSS codes that I can use for this?

2

Hi @vinnie,

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

– remove the search icon in the header

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#site-navigation .search {
    display: none;
}
– reduce the height of header

The header is already small as shown on this demo site Front Page - Shapely Demo so i am not sure how much small you want to make it.

– reduce the height of footer

You can do this by using below CSS code as described above.

footer#colophon {
    padding: 22px 0;
}
– change the color of header

Do you mean the color of header background or the text displayed on it including navigation menu text?

– make the header half transplant

Use the below CSS code to achieve this.

nav#site-navigation {
    background: rgba(255, 255, 255, 0.5);
}

Best Regards,
Movin

3

Hi Movin,

Many thanks for your answer! It solved all my issues.
Now I have reduced height of the footer, the #top button on the right side of footer doesn’t fit inside. Do you have CSS code to remove this #top button in the footer?

Thanks in advance,
Vinnie

4

Hi Movin,

One more thing:

.entry-content p br {
    display: block;
}

This piece of code hides the search icon. But when I move the mouse cursor on a place where the search icon was, search pop-up menu still appears. Is there a way to completely disable the search icon/function?

5
Now I have reduced height of the footer, the #top button on the right side of footer doesn’t fit inside. Do you have CSS code to remove this #top button in the footer?

Use the below CSS code to remove it.

a.btn.back-to-top.inner-link {
    display: none;
}
This piece of code hides the search icon. But when I move the mouse cursor on a place where the search icon was, search pop-up menu still appears. Is there a way to completely disable the search icon/function?

Use the below CSS code to hide it.

.module.widget-handle.search-widget-handle.left {
    display: none;
}
6

Your code does exactly what I wanted. I really appreciate your help. Have a nice day Movin!

7

You are most welcome here :slight_smile:

8

Hi, did you manage to change the size of a header? Top menu? I am trying to make it a bit taller and wider (to move logo left and menu items right) and I fail hopelessly.
Can anyone help?