Log in Get SwiftGrid →
Not resolved

Main header – Logo and Tag line

Ultra Theme started by Me-shell Attard Oct 6, 2015 10 replies
Me-shell Attard Oct 6, 2015 · 4:24 pm #2497

Hi, is there a way to make the logo and tag line appear in line with each other as opposed to the tag line being under the logo? I’ve installed simple custom CSS and played around with some of the coding given on another topic, but I still can’t get it to work right.

Many Thanks!

Andrew Misplon Puro Oct 6, 2015 · 4:30 pm #2498

Hi

Thanks for reaching out 🙂

Let’s try at Appearance > Custom CSS:

/* Logo and tagline inline */

.site-header .site-branding h1.site-title {
	display: inline-block;
	margin-rigth: 0.5rem;
}

.site-header .site-branding h2.site-description {
	display: inline-block;
}

Tweak that as required and let me know how you come along.

Me-shell Attard Oct 6, 2015 · 4:38 pm #2499

Unfortunately nothing changed 🙁
I am new to all this as of like 2 days ago, so I’m not sure what I can tweak in it. I changed the ‘rigth’ to ‘right’ as it was coming up in red, and I changed the 0.5rem to 1.5 to see what would happen, but nothing moved.

Thanks for your assistance 🙂

Andrew Misplon Puro Oct 6, 2015 · 4:40 pm #2500

Oh dear! Sorry about the mistake. Yes, corrected, it should have been:

/* Logo and tagline inline */

.site-header .site-branding h1.site-title {
	display: inline-block;
	margin-right: 0.5rem;
}

.site-header .site-branding h2.site-description {
	display: inline-block;
}

Please, use the Set as private reply checkbox below the comment form and send me your site link with the Custom CSS in place so I can take a look.

Thanks

Me-shell Attard Oct 6, 2015 · 4:49 pm #2501

This reply has been marked as private.

Andrew Misplon Puro Oct 6, 2015 · 4:50 pm #2502

Ahh right, my CSS was for the site title and site tagline. Let me re-work that for the logo and tagline. One moment.

Me-shell Attard Oct 6, 2015 · 4:53 pm #2503

Ah so sorry for my lack of knowledge! haha I’m clearly still learning all this.

Andrew Misplon Puro Oct 6, 2015 · 4:53 pm #2504

Not at all, I should have sent CSS for both. One moment…

Andrew Misplon Puro Oct 6, 2015 · 5:10 pm #2505

Thanks for the wait.

If you head over to Appearance > Customize > Theme Design > Header and set the tagline font size to 19px the following should then work:

/* Logo and tagline inline */

.site-header .site-branding {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.site-header .site-branding-container {
	max-width: 40%;
}

.site-header .site-branding img {
    display: inline-block;
    margin-right: 5px;
}

.site-header .site-branding h2.site-description {
    display: inline-block;
    vertical-align: middle;
}

Remove all the previous Custom CSS and use the above.

Me-shell Attard Oct 6, 2015 · 5:15 pm #2506

You’re brilliant!! Thank you so much! Gold star for you!

Andrew Misplon Puro Oct 6, 2015 · 5:16 pm #2507

Glad that helped 🙂 If anything else comes up, let me know know.

11 posts