Misc Questions: Mobile Header, Services Options Background, Social Media

Hello jcoinster,

Glad you like the theme and its not a problem at all with the many queries.

Sitewide Header – Is there a way to disable the header on other site pages?

Currently not possible with just the main theme but is doable via a child theme – please see: Unconditional Child Theme for an example child theme with no header image on inner pages.

Services Options Background – Is there a way to change the hover text to white?

Yes this can be achieved by addigthe following CSS rule to your child theme

.box > .icon:hover > .info > h3.title,
.box > .icon:hover > .info > p {
    color: #fff;
}

Social Media – Are there any social media links built in? I can’t find any.

There are no social links built in to the theme as people have many preferences and I felt these are better handled via a plugin.

Mobile Menu – If I change the menu button on mobile, it’ll be replaced when the theme updates unless I use a child theme, right?

That is correct.

If I create a child theme now, do I lose everything I did thus far?

All edits must always be carried out via a child theme – at this point I’d suggest creating a child theme and then copy over your edits in order to preserve theme

Static Home – How could I remove the static home entirely? The best I can do is only show a title.

Again this type of edits is better suited to a child theme – you’d need to copy over the front-page.php in to your child theme and omit the section with id="section3". Do note however that this will remove both the content and the sidebar.

A side note on the above: You would also need to create 2 blank pages and assigned one as the front page and the other as the blog page in order to have your posts displayed somewhere on the site.

I hope I’ve answered all of your queries satisfactory but if I’ve missied or did not explain something fully then please feel free to ask some more.

Regards,
Zulf

I also have the same question that I do not believe was answered when jcoinster asked:
“Mobile Header – This is my main concern. The rest are preference. On small or large screens, the header is awfully compressed or distorted. How can I either make it a fixed size or make it scaled?”

Is there a way to scale the header image down instead of stretching or squishing?

Great theme. Thank you for sharing it with us!

@sparklypony sorry I missed that.

The header is part of design decision and due to its content its not really possible to scale it down as would normally.

However in the latest version I’ve added some scalability via CSS – these rules can be tweaked via a child theme to achieve the desired results.

Regards,
Zulf

Thank you so much for your response! I have two remaining questions:

What is the CSS to make the header scalable and not distorted by page size?

I successfully removed the homepage but if you look at the site, you’ll see a large grey gap between the services section and the footer widgets. Is there a way to either reduce that or add a centered text element?

Quick question: I just want to add this to the top left corner. I tried placing it in many spots in top-nav and header with no luck. What am I doing wrong?

<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Famericandreampressurecleaningandmaintenance%3Fref%3Dhl&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=371574899806" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

@jcoinster it sounds like from his reply to me that this theme cannot go without distorting the image.

I am no expert, but I might be able to help you with the placement of the FB like box in the upper left corner.

I placed a logo image (though I need to correct the vertical centering on it) in the upper left by adding the img src code into the “top-nav.php” file directly after this line:
<div class="navbar-header">

Hope that helps!

edit: Here is my site so far: https://www.jungletrekking.org

Thanks for looking into it! Apparently im an idiot who doesn’t know my lefts from rights. I wanted it on the right side and that’s what I couldn’t get.

@jcoinster – these are the elements you need to be targeting by placing them in @media viewport size

#header-image,
#header-image img {
    max-height: 380px;
}

.video-section  {
    max-height: 340px;
}

See line 811 of custom.css for an example.

@sparklypony – you can add the following CSS rule to adjust the position of the logo

.navbar-header img {
  margin-top: 10px
}

Regards,
Zulf