#41 – Remove Title Bar | Extend Header

Posted in ‘weeblrAMP’
This is a public ticket. Everybody will be able to see its contents. Only enter usernames, passwords or any other sensitive information in the Private information field.
Monday, 30 October 2017 04:21 UTC
 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?
Monday, 30 October 2017 08:38 UTC

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?


Monday, 30 October 2017 15:25 UTC
Monday, 30 October 2017 15:48 UTC
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?

Monday, 30 October 2017 16:02 UTC

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!

Tuesday, 14 November 2017 05:34 UTC
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.
This ticket is closed, therefore read-only. You can no longer reply to it. If you need to provide more information, please open a new ticket and mention this ticket's number.