Change position of logo next to title

  • Hey there,

    I am almost done with my very first website using the sydney child theme and I am a little proud right now ?? You did a great job creating such a beautiful theme!!

    I have the following question: with the help of member awanrmb in an earlier post I managed to add a logo to the frontpage without removing the page title instead! Heres the code I changed the header.php into: 

    <header id="masthead" class="site-header" role="banner">
		<div class="header-wrap">
            <div class="container">
                <div class="row">
				<div class="col-md-4 col-sm-8 col-xs-12 text-center">
					<a>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>

					<h1 class="site-title"><a>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		        <?php if ( get_theme_mod('site_logo') ) : ?>
					<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		        <?php endif; ?>
				</div>
				<div class="col-md-8 col-sm-4 col-xs-12">
					<div class="btn-menu"></div>
					<nav id="mainnav" class="mainnav" role="navigation">
						<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
					</nav><!-- #site-navigation -->
				</div>
				</div>
			</div>
		</div>
	</header>

    Now there is just one thing left I would still like to change: The logo already sits in the right position but title and subtitle are sitting beneath of it now. I’d like both to be aligned (logo left, title and subtitle right (> subtitle should still sit below the title)).

    I already tried different things but I am not familiar enough yet with the codes…. Any advice on how I can arrange that?

    Thanks a lot in advance!

    Here’s a link for you to have a look:
    https://www.naturheilpraxis-andrea-nawka.de

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello

    You can achieve this by adding below CSS in you css file

    .site-title {
    font-size: 28px;
    float: left;
    width: 73%;
    }
    .site-description {
    color: #ffffff;
    float: left;
    }

    Thread Starter efraims.tochter

    (@efraimstochter)

    THANKS SO MUCH!
    With the position ‘float right’ instead of ‘left’ and a few attempts in adding padding and margin values, I finally managed to achieve the perfect position for the titel including the logo image.
    Happy me ??

    Thanks a lot!

    Alex H.

    (@hamburg-trip)

    @efraims.tochter, or anybody else, how did you change the position of title and subtitle so that it is on the right side of your logo? All my attempts ended in a position below the logo.

    Thread Starter efraims.tochter

    (@efraimstochter)

    Hey, AlexH.,

    this link was the final help for my problem:
    https://www.ads-software.com/support/topic/logo-next-to-title-2?replies=4

    It didn’t work exactly how he described the code but with a little playing around with the dimensions of the font it worked at least!

    Sorry this took so long. I will also look up the code again, that I finally used and post it here when I found it. That should be more accurate then…

    regards

    Thread Starter efraims.tochter

    (@efraimstochter)

    Ok… this is how I changed the Header code.
    I played around a lot with the font size of title and subtitel, line height, logo height and padding. The result works ?? I hope you’ll find what you need:

    /*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
	.site-title {
		font-size: 32px;
		line-height: 1.2;
	}
	.site-title a,
	.site-title a:hover {
		color: #fff;
	}

	.site-logo {
		max-height: 110px;
	}
	.site-header {
		position: absolute;
		top: 0;
		left: 0px;
		width: 100%;
		z-index: 1000;
		background-color: transparent;
		padding: 30px;
		-webkit-transition: all 0.3s ease-out;
		   -moz-transition: all 0.3s ease-out;
		    -ms-transition: all 0.3s ease-out;
		     -o-transition: all 0.3s ease-out;
		        transition: all 0.3s ease-out;
	}
	.admin-bar .site-header,
	.admin-bar .site-header.float-header{
		top: 37px;
	}
	.header-image {
		display: none;
		position: relative;
		height: 300px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.header-inner {
		display: none;
	}
	.site-title {
		font-size: 28px;
		float: right;
		width: 54.5%;
		margin: 3px 55px 0px 0px;
		padding: 5px 0px 23px 0px;
	}
	.site-description {
		color: #ffffff;
		float: right;
		line-height: 0;
		margin: -8px 4px;
		padding: 0px 27px;
	}
	.site-header.fixed {
		position: fixed;
	}

	.site-header .col-md-4,
	.site-header .col-md-8 {
		min-height: 0;
	}

	.site-header .logo {
		float: left;
		-webkit-transition: all 0.3s linear;
		   -moz-transition: all 0.3s linear;
		    -ms-transition: all 0.3s linear;
		     -o-transition: all 0.3s linear;
		        transition: all 0.3s linear;
	}

	.site-header .logo a {
		display: inline;
		height: 100%;
		float: left;
	}

	.site-header .logo {
		width: 135px;
		height: 27px;
	}

	.site-header.float-header {
		background-color: rgba(0,0,0,0.9);
		padding: 0;
	}
	.site-header.float-header #mainnav {
		padding: 0;
	}

	.site-header.float-header #mainnav > ul > li > a {
	    height: 70px;
	    line-height: 70px;
	}

	.site-header.float-header .logo {
	    	margin: 20px;
	}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change position of logo next to title’ is closed to new replies.