[Support request] using free space next to logo

Home Forums Support [Support request] using free space next to logo

Home Forums Support using free space next to logo

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #283131
    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

    GP Premium 1.2.94
    #283134
    Leo
    Staff
    Customer Support
    #283145
    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

    #283151
    Leo
    Staff
    Customer Support

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

    #284597
    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

    #284622
    Leo
    Staff
    Customer Support

    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.

    #284631
    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

    #289463
    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

    #289512
    Leo
    Staff
    Customer Support

    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.

    #289537
    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


    @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

    #289539
    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>
    #289551
    Leo
    Staff
    Customer Support

    – 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;
    }
    #289556
    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

    #289557
    Leo
    Staff
    Customer Support

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

    .header-right {
        text-align: right;
    }
    #289558
    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;
    }  
    
    
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.