How to align logo, site title, and site description in a row?

  • Resolved unakriti

    (@unakriti)


    4 years, 11 months ago

    Hello,

    I have recently setup a WordPress site with Sela theme (and Jetpack). Since the site is still under construction, I do not have a link to share.

    But, I am wondering whether there’s a way (CSS) to align logo, site title, and site description in a single row? If someone can suggest a solution based on the default Sela theme setup.

    Kind regards

Viewing 8 replies - 1 through 8 (of 8 total)
  • supernovia

    (@supernovia)

    4 years, 11 months ago

    @unakriti have you considered putting them all in your logo image, then disabling the display of the site title and description?

    Thread Starter unakriti

    (@unakriti)

    4 years, 11 months ago

    @supernovia

    Thank you and yes, that’s an option I’ve used in the past. However, for this site, I do not want site description in the logo. Hence I thought of CSS.

    Kind regards,

    Gemma Evans

    (@gemmaevans)

    4 years, 11 months ago

    Hi @unakriti,

    This change is a little tricky but give this CSS a try:

    @media screen and (min-width: 608px) {

    /* header background */
    header {
        background: #fff;
    }
    
    /* fixed width site branding to centre it */
    .site-branding {
        display: table;
        width: 580px;
        margin: 0 auto;
        border-collapse: collapse;
    }

    /* place elements side by side */
    .site-branding a.site-logo-link {
        display: table-cell;
        padding: 30px 0;
    }

    /* align title and tagline text to left of the table cell container */
    .site-branding .site-title, .site-branding .site-description {
        text-align: left;
    }
    
     /*use padding to centre the tagline and text vertically*/
    .site-branding .site-title {
        padding-top: calc(50% + 30px);
    }

}

    If that doesn’t work, I recommend contacting a developer for help or replying here once the site is live and visible to the public.

    Hopefully this CSS will do what you are looking for though.

    • This reply was modified 4 years, 11 months ago by Gemma Evans.
    Thread Starter unakriti

    (@unakriti)

    4 years, 11 months ago

    Thank you @gemmaevans

    You are right. It is tricky! I worked through the code to display site-branding in a single row on desktops and laptops, but not for smartphones.

    Where as in the standard way of putting all site branding (logo, site title and description) inside a ‘wider’ image (site description is longish) and then disabling the display of the site title and description – works on smartphones. But on desktops / laptops, the image is shown rather small in size. I am hoping to make it work one way or another without changing the theme.

    Appreciate your support.

    Kind regards,

    Thread Starter unakriti

    (@unakriti)

    4 years, 11 months ago

    Sharing what worked for me – in case anyone else is after something similar. You can play around with specific values as desired.

    	
       /* Align Site Branding in a Row - All Devices */

       /* Fix Site Logo Size */							
       /* Only if you need it */				
					
	.site-logo {
 	max-width: 80px;
	padding: 10px, 0;
		}
									
	/* Fill Header background */
        header {
        background: #fff;
    	       }

	/* Center Site Branding Elements */

	.site-branding {
	display: table;
	width: auto;
        margin: 0 auto;
        border-collapse: collapse;
    		}

	/* Place Site Branding Elements in Single Row  */
	
	.site-branding a.site-logo-link {
    	display: table-cell;
    	padding: 20px 0;
    		}

        /* Align Site Title & Tagline left of Table Container */
									
	.site-branding .site-logo, .site-branding .site-title, .site-branding .site-description {
        float: center;
	text-align: left;
    		}

    Kind regards

    • This reply was modified 4 years, 11 months ago by unakriti.
    Gemma Evans

    (@gemmaevans)

    4 years, 11 months ago

    Thanks for sharing @unakriti!

    quelyn

    (@quelyn)

    4 years, 9 months ago

    This is just what I was looking for, thanks so much for sharing your solution!!!

    Thread Starter unakriti

    (@unakriti)

    4 years, 9 months ago

    @quelyn

    glad to read,, serves the purpose:)

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to align logo, site title, and site description in a row?’ is closed to new replies.