Site logo followed by header text

Home Forums ColorMag Pro Site logo followed by header text

This topic contains 20 replies, has 3 voices, and was last updated by  Bishal Napit 2 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1306033

    Mike
    Participant

    Hello,
    I have a question regarding the header logo and the header text.

    How do I have the header logo aligned left and the header text following it?

    My site is siliconhell.com

    Thanks

    Mike

    #1306085

    Bishal Napit
    Moderator

    Hi, Mike.

    Can you visit Appearance->Customize->Header Options->Header Logo section and then choose the required layout from the available option and check? Thanks.

    #1306178

    Mike
    Participant

    Bishal
    I checked the options in there and they do not give the desired result. I would like to display my logo followed by the header text.

    At moment it displays as follows

    ##########
    # #
    # LOGO #
    # #
    # #
    ##########
    HEADER TEXT site title
    HEADER TEXT tagline

    I would like it to look like below

    ##########
    # #
    # LOGO # HEADER TEXT site title
    # # HEADER TEXT tagline
    # #
    ##########

    many thanks

    Mike…

    #1306179

    Mike
    Participant

    Unfortunately my text above doesn’t look quite right.

    I’m trying to get my logo on the same line as the text (not above or below it).

    Many thanks

    Mike…

    #1306349

    Bishal Napit
    Moderator

    Hi, Mike.

    Could you add the required logo in your site and let us know? Thanks.

    #1306358

    Mike
    Participant

    Bishal
    I have enabled the logo and the text on my site HTTP//siliconhell.com

    At the moment the logo is above the site text. I would like the logo to be followed on the same line by the text.

    Hope that makes sense

    thanks

    Mike

    #1306412

    Hello Mike,

    Please paste the following code under Appearance->Customize->Design->Custom CSS or Appearance->Additional CSS and see if it works for you.

    #header-text {
        float: none;
        padding-top: 35px;
    }
    #header-left-section {
        width: 35%;
    }

    Regards,
    ThemeGrill Support Team

    #1306474

    Mike
    Participant

    Bishal
    it puts them on the same line but it truncates the text. The link below shows a screenshot

    https://1drv.ms/i/s!AuIpNNIDj8H1hx1j2hYFctgbnxQR

    Thanks

    Mike

    #1306484

    Helli Mike,

    I just visited your site and it seems like you have removed the logo so we couldn’t encounter the issue.

    Additionally, it seems like you have not added the code provided earlier in the Additional CSS box.

    Regards,

    ThemeGrill Support Team

    #1306487

    Mike
    Participant

    Bishal
    I have enabled the logo and the text, I have also re-enabled the CSS code that you suggested.

    It does not display properly in Microsoft Edge

    thanks

    Mike

    #1306499

    Bishal Napit
    Moderator

    Hi, Mike.

    we could see that it is rendering properly in either of the browsers, be it Google Chrome or Microsoft Edge. So, can you clear the browser cache and see if it renders properly? Thanks.

    #1307018

    Mike
    Participant

    Bishal

    I’m afraid I’m still having problems. The site name and description is truncated unless the browser is maximised. Also the mobile view truncates and looks bad. 40 percent of my users use mobile devices so I need to get it resolved.

    The link below is a screenshot from a mobile device
    https://1drv.ms/i/s!AuIpNNIDj8H1hyigigg50fLCNBFx

    The line below is a screenshot of chrome when it is not maximised.
    https://1drv.ms/i/s!AuIpNNIDj8H1hylSa6Ti4dBLeRuj

    Please Can You Help

    Thanks

    Mike

    #1307057

    Bishal Napit
    Moderator

    Hi, Mike.

    Can you try the below provided CSS code in the Additional CSS Box provided via the Customizer Options and check:-

    @media (max-width: 768px) {
    	#header-left-section {
    		width: 100%;
    	}
    }

    Thanks.

    #1307086

    Mike
    Participant

    Bishal
    that seems to have solved the problem whilst in chrome. It hasn’t resolve the problem in Microsoft Edge. I have emptied my cache on my laptop and within WordPress. Maybe it is cached somewhere else. I will test it again tomorrow morning UK time.
    Please could you have all the through my custom CSS? I think I might have some duplication in the code. I will paste it at the bottom of this post.

    Thanks

    Mike

    
    .widget_featured_slider .below-entry-meta .byline, .widget_featured_slider .below-entry-meta .posted-on, .widget_highlighted_posts .below-entry-meta .byline, .widget_highlighted_posts .below-entry-meta .posted-on {
    display: none;
    }
    #header-left-section {
    width: 25%;
    }
    #header-right-section {
    width: 75%;
    }
    @media screen and (max-width: 768px) {
    #header-left-section, #header-right-section {
    float: none;
    width: 100%;
    }
    }
    
    .widget h3.entry-title a:hover {
    color: yellow !important;
    }
    
    /*
    	CSS Migrated from Jetpack:
    */
    
    /*
    Welcome to Custom CSS!
    
    To learn how this works, see https://wp.me/PEmnE-Bt
    */
    
    /*
    Remove social icons from header
    Results in social icons only in footer
    */
    header .social-links {
        display: none;
    }
    /*
    The site logo and site text
    */
    #header-text {
        float: none;
        padding-top: 35px;
    }
    #header-left-section {
        width: 35%;
    }
    /*
    justify site logo and site text
    */
    @media (max-width: 768px) {
            #header-left-section {
                    width: 100%;
            }
    }
    
    
    #1307135

    Bishal Napit
    Moderator

    Hi, Mike.

    Can you remove this CSS code below as it is duplicated below at last of your CSS code:-

    #header-left-section {
        width: 25%;
    }
    #header-right-section {
        width: 75%;
    }
    @media screen and (max-width: 768px) {
        #header-left-section, #header-right-section {
            float: none;
            width: 100%;
        }
    }

    We think that it was to solve the responsive Google Adsense in the header sidebar. Since, you are not using that at all in your site, you may not need it at all.
    Thanks.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.