Canvas Support

header logo with responsive text company name

8 replies·opened Mar 1, 2019
R
RustproofMar 1, 2019

Hello, How would I add a company name and subtext right-aligned to the logo image?

I must be missing something.
The code below shows subtext with chrome and not Safari, but if I add a second line with a class of standard-logo, then it appears once on safari and twice on chrome.

                 <div id="logo">
  <a href="/" class="standard-logo text-lg font-normal" data-dark-logo="storage/images/company-logo.png">
<img src="storage/images/company-logo.png" alt="Company Name" /> Company Name
  <a href="/" class="retina-logo text-lg font-normal" data-dark-logo="storage/images/company-logo.png">
<img src="storage/images/company-logo.png" alt="Company Name" /> Company Name
              <h2>SubText Here</h2></a>
                 </div><!-- #logo end -->

CSS

#logo img {
    display: inline-block;
    margin-right: 5px;
}
S
SemiColonWebSTAFFMar 4, 2019

Hello,

The Code you have posted appears to be incorrect and Invalid HTML. Please make sure that you have validated the HTML here: https://validator.w3.org/ . If you see no errors here, then please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

R
RustproofMar 5, 2019

The code validates correctly. I am also using tailwindcss, but I'd like to get it done with your Canvas style.css.

https://boardsbottles.com

S
SemiColonWebSTAFFMar 5, 2019

Hello,

We have checked out your Codes and the .retina-logo does not exist on your Page. Please make sure that you have added the Retina Logos to make sure that your Logo is visible on Retina Devices.

Additionally, we have checked out your codes and some of them appears to have incorrect classes: 

<h2 class="text-smretina-logo text-right text-sm -mt-10">Sip and Savor</h2>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

R
RustproofMar 5, 2019

Thank you. I removed the class.
I want to right align the sub heading "sip and savor" with the company name, reduce the vertial padding, and make the font size 20px. Would you help me add this to the stylesheet. I've searched through the comments and documentation and I'm not sure which class or stylesheet to use or adjust to make these changes.

               <div id="logo">
<a href="/" class="retina-logo" data-dark-logo="storage/images/boards-bottles-logo-white-tilted.svg"><img src="storage/images/boards-bottles-logo-white-tilted.svg" alt="{{ config('app.name') }}" /> {{ config('app.name') }}</a>
<a href="/" class="standard-logo" data-dark-logo="storage/images/boards-bottles-logo-white-tilted.svg"><img src="storage/images/boards-bottles-logo-white-tilted.svg" alt="{{ config('app.name') }}" /> {{ config('app.name') }}</a>
            <h2>Sip and Savor</h2>
               </div><!-- #logo end -->
R
RustproofMar 5, 2019

Would you help me make these changes to the stylesheet?

S
SemiColonWebSTAFFMar 7, 2019

Hello,

You can use the <h2> tag inside the #logo > a Element, and then use the following CSS Code: 

#logo a h2 {
	position: absolute;
	font-size: 20px;
	top: auto;
	left: auto;
	right: 0;
	bottom: 15px;
	margin-bottom: 0;
	line-height: 1;
}

This should work fine. Hope this Helps!

Additionally, we currently do not provide Customization Services according to the Item Support Policy: https://themeforest.net/page/item_support_policy . So for any further customizations you will either need to manually code this yourself or Hire a Freelancer in order to help you with this.

Let us know if we can help you with anything else or if you find any further issues.

R
RustproofMar 7, 2019

Thank you for your efforts. I understand.
perhaps an example like this could be added to one of your templates in the future?
`

S
SemiColonWebSTAFFMar 10, 2019

Hello,

Yes we will surely try integrating this in the Future Versions of Canvas. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard