#41 – Remove Title Bar | Extend Header

 Is there a way to completely remove the title bar?

Also, is there a way to make the header extend the entire desktop screen in standalone mode?

Hi

I see: by title bar, you mean the actual article title. This can be done with CSS, I'd suggest adding the following to the "Custom styles" input field, under the "Customize" menu:

.wbamp-content h1 {display:none}

As for the expanding the title bar background across the entire page, you can do the same with:

.wbamp-nav-container {margin-left:-1000px;margin-right:-1000px;max-width:none}

This way of hiding/showing things is the simplest, as it only requires copy/pasting a bit of CSS in weeblrAMP settings. Another option would be to use hooks (filters) to modify the output of weeblrAMP. Out of curiosity, would you be more comfortable with CSS or filters?

Rgds

PERFECTO! HAPPY HAPPY HAPPY! Thank you

Hi again,

Looking at https://www.contact.mobile-column-lifts.com/, you probably need another bit of CSS, to re-center the logo and title:

.wbamp-header .wbamp-header-block {display: table};

For me, the logo and title are display on the left site of the screen currently, and this should fix that. Can you confirm?

Rgds

Hi

Sorry to spam you with all those messages, but I find very interesting that you are using the "Standalone" mode for this site (it's exactly the kind of usage we were thinking about when we added that mode).

Can I suggest one thing: in the middle of the page, you have a small text: "Call Us Now XXX-XXX-XXXXX". I would suggest you replace this with a "tel" link, such as:

<p><a class="wb-action-link" href="tel:XXX-XXX-XXXXX">Call us at XXX-XXX-XXXXX  »></a> </p>

You can then style the button like so:

p.wb-action-link {
  margin-top: 3rem;
  text-align: center;
}

a.wb-action-link, a.wb-action-link:visited, a.wb-action-link:focus, a.wb-action-link:active {
  padding: 1em 2em;
  margin: 1em 0;
  background: #6E97CC;
  color: #000000;
  text-decoration: none;
  box-shadow: none;
}

a.wb-action-link:hover {
  background: #FFAC2F;
  box-shadow: none;
}

This will give you:

1 - a nice visible call to action button
2 - When people click on that on their phone, they will actually be calling you directly, without having to copy/paste the phone number!

Rgds

This ticket has been automatically closed. All tickets which have been inactive for a long time are automatically closed. If you believe that this ticket was closed in error, please contact us.