Remove Gap At Top

brandondarrelllaneflanery · Member · Oct 24, 2021 at 8:00 pm
Copy link

Add topic to favorites
Hi there!
I’m trying to have my hero image sit just underneath the navigation bar I have at the top. There’s this huge gap where normally you’d type “Title.” I don’t want to use that space, and I want the image to sit just underneath. Any thoughts? I’m guessing I need to do this in CCS/HTML, but I don’t know anything about CCS/HTML. Any thoughts on what I should type and where I should type it?

The blog I need help with is: (visible only to logged in users)
brandondarrelllaneflanery · Member · Oct 24, 2021 at 8:00 pm
Copy link
To get a peek at what I’m talking about: https://brandonflanery.com/portfolio/?preview_id=650&preview_nonce=910b3c522a&preview=true
brandondarrelllaneflanery · Member · Oct 24, 2021 at 8:02 pm
Copy link
AAAAND! I also wanna keep the page name in the menu, but not show “Writing Portfolio” up at the top.
kokkieh · Staff · Oct 25, 2021 at 5:43 am
Copy link
Hi there,

I’m trying to have my hero image sit just underneath the navigation bar I have at the top. There’s this huge gap where normally you’d type “Title.” I don’t want to use that space, and I want the image to sit just underneath.

This code should do the trick:
```
/* remove page title and spaces block */
div.wp-container-61763ead672f8.wp-block-group, div.wp-container-61763ead672f8.wp-block-group + .wp-block-spacer {
	display: none;
}

/* Reduce space below menu bar*/
header.wp-container-61763ead66ea4.wp-block-group.site-header {
  padding-bottom: 30px !important;
}
```
Please do give a title to that page. Even if you don’t want it to be visible, the title is important for SEO purposes – it’s used by search engines to index the page – and it’s also used by screen readers for people with visual disabilities.

The CSS I gave above will hide the title from being visible.

The section that reduces the space below the menu will apply to all pages on the site. You can play around with the 30px value to make it look the way you want.

I also wanna keep the page name in the menu, but not show “Writing Portfolio” up at the top.

You don’t appear to have a title set on that page either at the moment. To have a title set, but hide it on that page, you can use this:
```
/* Hide title on the Writing Portfolio page */
div.wp-container-6176418d64f28.wp-block-group, div.wp-container-6176418d64f28.wp-block-group + .wp-block-spacer {
	display: none;
}
```
brandondarrelllaneflanery · Member · Nov 8, 2021 at 7:50 pm
Copy link
Hi there,
Thanks so much for this info. I’m trying to copy and paste this in there. I’ve added the title. But where do I put this code? I go to the page edit and then click the elipses then click code editor then copy the code you put in above and paste it to the top. Is that wrong? Where exactly should I put it?
helper-heroponriki · Member · Nov 8, 2021 at 9:20 pm
Copy link
To access the CSS editor, go to My Site → Appearance → Customize → Additional CSS.

You can read more about how to add CSS code here:

https://wordpress.com/support/editing-css/
brandondarrelllaneflanery · Member · Nov 9, 2021 at 9:35 pm
Copy link
Man… I tried copy/pasting the two pieces of code you shared, @kokkieh, and it didn’t work… Any other thoughts? Do I need to add to the code?
staff-totoro · Staff · Nov 9, 2021 at 11:40 pm
Copy link
Hi there,

CSS override codes like this go in the CSS tab of your customizer, below any existing code you have there:

Did you happen to add the code somewhere else instead? If so it would not work there so you can safely remove it and instead add the code in the site customizer, as helper-heroponriki has pointed out.

Once it’s added let us know and we can take a closer look, thanks!

No items found.