[Support request] using free space next to logo

[johnno43]

Hi guys

I want to use the free space on the header next to the logo.
The site I’m working is http://www.sandlandtaylorconsultancy.co.uk
I want to add a phone no. And a smaller logo of the governing body he belongs to.
The phone no.in the middle and the other logo on the right hand side.
Can this be achieved and if so what’s the best way to do it ?

Regards
John

[Leo]

Hi John,

This post might help: https://generatepress.com/forums/topic/2-sides-to-the-header-widget/#post-228923

Let me know.

[johnno43]

Hi Leo

That looks like what I’m looking for thanks.
The logo on the site is floating to the left so I presume the same principle applies?

John

[Leo]

Yup it should be – we can also style the three sections differently if you want just let me know 🙂

[johnno43]

Hi Leo

I’ve got the 3 sections on the header now if you look. Here is what i would to achieve if possible
1. Make the main logo so that it takes you to the home screen when you click on it.
2. Make the phone number and smaller logo go to the bottom in line with the word Consultancy on the main logo.
3. Make the phone number larger.
Any help would be appreciated

John

[Leo]

1. Insert your logo with a link like this:
<a href="http://sandlandtaylorconsultancy.co.uk/"><img src="http://sandlandtaylorconsultancy.co.uk/wp-content/uploads/2016/11/cropped-photo7.jpg"/></a>

2&3. Try this CSS and adjust the px number as you see fit:

@media (min-width:769px) {
    .header-center {
        padding-top: 155px;
        font-size: 25px;
    }
    .header-right {
        padding-top: 155px;
    }
}

Additional tip: You might also want to insert the phone number as HTML link so users can click on it on mobile device. Try something like this:
<a href="tel:01522-810-460">01522-810-460</a>

Let me know.

[johnno43]

Hi Leo

Looking good.
I will wait to hear back from my client on how exactly he wants it.
Thanks for getting back to me so quickly

John

[johnno43]

Hi Leo

Sorry for the late reply but my client was out of the country and i couldn’t get hold of him.
So he has a few changes:
i need to make the main logo on the left in line with the carousel below it. And the Rics logo on the right in line with the carousel below it as well. Also the Rics logo needs to be moved to the top in line with the top of the main logo with the phone no. somewhere below it.
I need to put some new text in the middle which will be 2 lines and in the light blue of the logo.

Regards
John

[Leo]

Ok I can give you some steps to help you get started:
– To lineup the main logo with the left of carousel, you can either change GP’s container width (Layout > Container > Container Width) to match the Elementor container width below, or vise versa change the Elementor container width to match GP’s container width.
– Once the above step is done, REPLACE the CSS I provided above to this to line up RICs logo and move it up.

@media (min-width:769px) {
    .header-center {
        font-size: 25px;
        color: #ffffff;
    }
    .header-right {
        text-align: right;
    }
}

– To insert contents in a different line, you can use the break tag: <br>
– I’ve added a color part to the .header-center class CSS above so you can change it to the blue you want.

[johnno43]

Hi Leo

So ive been tinkering a little bit with my limited knowledge of code.
I managed to align the main logo on the left but the Rics logo on the right was just sticking out a little bit on the right until i moved the phone no. to the right header as well and then it went a bit weird. I then added the text to the centre.
How do i get the phone no. under the Rics logo but not directly under it, say a bit of a gap that i can alter to suit?
How can i justify the text in the middle and drop that down a little bit also?
Here is my html and css as it stands at the moment

<h2>Taylor Made<br>
Professional Services

01522-810-460

@media (min-width:769px) {
.header-center {
font-size: 25px;
color: #6caee0;
}
.header-right {
text-align: right;
}
}

I know i’ve prob butchered the the html a bit 🙂

John

[johnno43]

@media (min-width:769px) {
    .header-center {
        font-size: 25px;
        color: #6caee0;
    }
    .header-right {
        text-align: right;
    }
}

<div class="grid-33 header-left">
    <a href="http://sandlandtaylorconsultancy.co.uk/"><img src="http://sandlandtaylorconsultancy.co.uk/wp-content/uploads/2016/11/cropped-photo7.jpg"/></a>
</div>
<div class="grid-33 header-center">
    <h2>Taylor Made<br>
           Professional Services
</div>
<div class="grid-33 header-right">
   <img src="http://sandlandtaylorconsultancy.co.uk/wp-content/uploads/2016/11/RICS-logo2.jpg" alt="" />
    <a href="tel:01522-810-460">01522-810-460</a>
</div>

[Leo]

– The GP container is set to 1140px and looks like Elementor is at 1120px which would explain why they aren’t aligning perfectly.
– Close the h2 tag: <h2>Taylor Made<br>Professional Services</h2>
– Replace the .header-center class with something like this:

.header-center {
    font-size: 25px;
    color: #6caee0;
    text-align: center;
    padding-top: 30px
}

– Replace the header-right div with this:

<div class="grid-33 header-right">
   <div><img src="http://sandlandtaylorconsultancy.co.uk/wp-content/uploads/2016/11/RICS-logo2.jpg" alt=""/></div>
   <div class="second-line"><a href="tel:01522-810-460">01522-810-460</a></div>
</div>

– Add this CSS inside the @media wrap below the .header-right class:

.header-right .second-line {
    padding-top: 20px;
}

[johnno43]

Hi Leo

Everything was looking great until i added the css for header right and then it brought the right logos in for some reason as you can see.

Regards

[Leo]

I don’t see this block of code being added anymore:

.header-right {
    text-align: right;
}

[johnno43]

so close.

this is the css now

@media (min-width:769px) {
    .header-center {
        font-size: 25px;
    color: #6caee0;
    text-align: center;
    padding-top: 40px
    }
    .header-right .second-line {
    padding-top: 20px;
    text-align: right;
}  

[Author]

Posts