Support » Theme: Sela » How to align logo, site title, and site description in a row?

  • Resolved unakriti

    (@unakriti)


    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)
  • @unakriti have you considered putting them all in your logo image, then disabling the display of the site title and description?

    @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,

    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 3 months, 1 week ago by  Gemma Evans.

    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,

    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 3 months, 1 week ago by  unakriti.

    Thanks for sharing @unakriti!

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

    unakriti

    (@unakriti)

    @quelyn

    glad to read,, serves the purpose:)

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.