Support/Ultra Theme/Main header – Logo and Tag line

Main header – Logo and Tag line

Tagged: 

  • Author
    Posts
  • October 6, 2015 at 4:24 pm #2497

    Me-shell Attard
    Participant

    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!

    October 6, 2015 at 4:30 pm #2498

    Andrew Misplon
    Keymaster

    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.

    October 6, 2015 at 4:38 pm #2499

    Me-shell Attard
    Participant

    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 🙂

    October 6, 2015 at 4:40 pm #2500

    Andrew Misplon
    Keymaster

    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

    October 6, 2015 at 4:49 pm #2501

    Me-shell Attard
    Participant
    This reply has been marked as private.
    October 6, 2015 at 4:50 pm #2502

    Andrew Misplon
    Keymaster

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

    October 6, 2015 at 4:53 pm #2503

    Me-shell Attard
    Participant

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

    October 6, 2015 at 4:53 pm #2504

    Andrew Misplon
    Keymaster

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

    October 6, 2015 at 5:10 pm #2505

    Andrew Misplon
    Keymaster

    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.

    October 6, 2015 at 5:15 pm #2506

    Me-shell Attard
    Participant

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

    October 6, 2015 at 5:16 pm #2507

    Andrew Misplon
    Keymaster

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

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

Scroll to top