x

Remove text/logo space

Hi,

How do I use Edit HTML/CSS to remove the text/logo space at the top of each page?  I can choose to have it blank, but want to remove the entire thing so there is not an empty space at the top of the page.

7,780 Views
Message 1 of 20
Report
2 Best Answers

Best Answer

Alright @Sparks, so in your case for Highlighter you'll want to head into the 'Theme' tab and then 'Edit HTML/CSS' 

Once there, we're going to want to do the following:

  1. Click the 'No-Header.html' area under the 'Header Type' section. You should see the colored text in that gray code editor box change a bit. 
  2. Once There, select all of the code and copy it all. Windows: CTRL+A and then CTRL+C // Mac: Command+A and then Command+C 
  3. With that code copied, click the '+' next to 'Header Types' and choose 'New Header Type' you'll see a new header appear and get the option to rename it, name it something like 'NoBlankSpace' or similar. 
  4. With that 'NoBlankSpace.html' header selected, click on the gray code editor and select all again (CTRL+A // Command+A)
  5. Once you have the text highlighted, paste the code we copied from step 2 into that code editor.
  6. Now that we have the code pasted successfully, we can navigate to line 32 which says the following 
    <div id="sitename">{logo}</div>
    Simply delete that entry, from the starting '<' to the final '>' 
  7. Now that we have that done, 'Save' the theme, it will prompt you to give it a name.. just name it 'Highlighter No Blank Space' or whatever you'd like to identify it as. 
  8. The theme should automatically apply, and now we can go into the 'Pages' tab where we can select the page we'd like to edit and change the header type for that page. You'll see that that custom 'NoBlankSpace' header type we made will be an option. Choose that, and viola, that blank space will be removed! 

image

If at any point you'd like to add a logo, just change the header back to 'No Header/Etc' and you'll be able to add a logo to the page. 

View Best Answer >

8,554 Views
Message 4 of 20
Report

Best Answer

I would try it once more @Sparks, if the issue continues I can take a look at the account itself and see if there are any issues that might be causing the ehader box to jump around. 

View Best Answer >

8,530 Views
Message 8 of 20
Report
19 REPLIES 19

Would you mind replying with what theme you're using so I can take a closer perosnalized look for you? Thanks @Sparks! Smiley Happy

7,778 Views
Message 2 of 20
Report

Hi @Starworshipper Smiley Happy  Yes I have chosen the Highlighter theme.  It looks like the text/logo box is at the top of every page, but I don't need to use that option, and don't want the blank space at the top of every page.  Does it look like it would be possible to clear it?

7,774 Views
Message 3 of 20
Report

Best Answer

Alright @Sparks, so in your case for Highlighter you'll want to head into the 'Theme' tab and then 'Edit HTML/CSS' 

Once there, we're going to want to do the following:

  1. Click the 'No-Header.html' area under the 'Header Type' section. You should see the colored text in that gray code editor box change a bit. 
  2. Once There, select all of the code and copy it all. Windows: CTRL+A and then CTRL+C // Mac: Command+A and then Command+C 
  3. With that code copied, click the '+' next to 'Header Types' and choose 'New Header Type' you'll see a new header appear and get the option to rename it, name it something like 'NoBlankSpace' or similar. 
  4. With that 'NoBlankSpace.html' header selected, click on the gray code editor and select all again (CTRL+A // Command+A)
  5. Once you have the text highlighted, paste the code we copied from step 2 into that code editor.
  6. Now that we have the code pasted successfully, we can navigate to line 32 which says the following 
    <div id="sitename">{logo}</div>
    Simply delete that entry, from the starting '<' to the final '>' 
  7. Now that we have that done, 'Save' the theme, it will prompt you to give it a name.. just name it 'Highlighter No Blank Space' or whatever you'd like to identify it as. 
  8. The theme should automatically apply, and now we can go into the 'Pages' tab where we can select the page we'd like to edit and change the header type for that page. You'll see that that custom 'NoBlankSpace' header type we made will be an option. Choose that, and viola, that blank space will be removed! 

image

If at any point you'd like to add a logo, just change the header back to 'No Header/Etc' and you'll be able to add a logo to the page. 

8,555 Views
Message 4 of 20
Report

Okay thank you @Starworshipper Smiley Happy

I completed up to #7 in your instructions, thank you they are so easy to follow.  But it still seems like there is a blank space text/logo option at the top of the page. 😕

image

And when I try to click on the down arrow icon to change the header type, the entire section just jumps and no options open (it was doing that before editing any HTML/CSS).

image

Do you know what might be going on there?

7,765 Views
Message 5 of 20
Report

Have you saved the custom theme @Sparks? If you have, and the dropdown is acting weird, try to close the browser and go back into Weebly, I had to do that on my end in order for the customer header we made to appear. 

7,762 Views
Message 6 of 20
Report

Yes @Starworshipper I have saved the custom theme.  I took a screen shot but now can't insert images to our convo here for some reason.

I have logged in and out of weebly several times, but still the Header Type drop down box is jumping around when I try to access it.  Do you think I should start again all over?

7,747 Views
Message 7 of 20
Report

Best Answer

I would try it once more @Sparks, if the issue continues I can take a look at the account itself and see if there are any issues that might be causing the ehader box to jump around. 

8,531 Views
Message 8 of 20
Report

Gah !  it worked now !  Yay Smiley Very Happy  thank you so much Smiley Happy

7,742 Views
Message 9 of 20
Report

Yay! Sweet, glad we finally got it working! Smiley Very Happy

7,732 Views
Message 10 of 20
Report

Can you help me add the logo back to the top of my page. It just disappeared when I went to edit it.

Mona

2,982 Views
Message 13 of 20
Report
Square

Did you still need help with that, @Mona_Salti? I checked your site in the editor and saw your logo at the top of your site.

2,980 Views
Message 13 of 20
Report

Hi, I'm using Birdseye 2 Theme and wanted to know if you are able to delete the logo/text combination on the left hand top corner so that my menu options can spread out. I don't need it and it's taking up space and makes my menu options lump together to the right hand side. My site is www.hillcresthealthcentre.com. Thanks

1,914 Views
Message 15 of 20
Report
Square

It looks like you were able to remove it @guatavita1, however, I do not know if it is possible to utilize the space without some custom html/css coding. 

1,914 Views
Message 15 of 20
Report

Hi,I followed all the instruction but it seems not working at all for me.I want to  get the logo/text remove in my other page but seems it follows the homepage settings.Can you please help me in this.Im super frustrated with the coding.I tried searching the codes that you had mentioned and I cant seem to find it.

3,023 Views
Message 15 of 20
Report

Hi, I am using the "Southcorner - Haberdasher" theme and would like to remove the blank space just as described by the original poster. With that theme, would the instructions be the same?

Thanks,

Jensen

2,769 Views
Message 19 of 20
Report

My no-header looks like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class=' no-header-page wsite-background wsite-theme-dark'>
<div id="wrapper">
<table id="header">
<tr>
<td id="logo" rowspan="2">{logo}</td>
<td id="header-top-right">
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="header-bottom-right">
<div class="search">{search}</div>
</td>
</tr>
</table>
<div id="navigation">{menu}</div>
<div id="content">{content}</div>
<div id="footer">
<div id="footer-content">
<div style="visibility:hidden">
{footer}</div>
</div>
</body>
</html>

How can I remove the text/logo space?

2,758 Views
Message 19 of 20
Report

Problem solved. I looked in the wrong file. In main_style.css now simply changed the margin in Rule 76 (table#header) from 156 in 56 and finished.

2,745 Views
Message 19 of 20
Report

Will this fix only work for Highlighter or will it work for other themes as well?

Tags (1)
2,723 Views
Message 20 of 20
Report

I have the same problem -- Why doesn't Weebly provide a universal way to turn off the blank space at the top of the page?  I would provide the name of the Theme I'm using, but I can't find that data in any of the site settings.

2,729 Views
Message 21 of 20
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.