Skip to content

Theme Palace

  • Home
  • Themes
  • Plugins
  • My Account
  • Support
  • Blog
CLose Search

Quick links

  • Support
  • My Accounts
  • Latest themes
  • Trending themes
Wave
Wave

Logo and Title Placement

Home › Forums › Pro Themes › Flat Commerce Pro › Logo and Title Placement

Tagged: logo, Site Identity, title

  • This topic has 12 replies, 2 voices, and was last updated 4 years ago by wensolutions.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 8, 2016 at 5:04 pm #25178
    jjambeck
    Participant

    Can my logo be inline with my title (next to it)? Instead of the logo over the title as it is…
    Thank you!

    December 8, 2016 at 10:56 pm #25193
    wensolutions
    Keymaster

    Hello @jjambeck

    To make the logo appear next to the title , go to Admin Panel > Appearance > Customize > Site Identity . Here you can click on the Check to move Site Title and Tagline before logo.

    If it does not solve your issue Please post your site URL so that we can inspect your website for the issue and provide a precise fix.

    Best Regards!!!

    December 9, 2016 at 4:14 am #25235
    jjambeck
    Participant

    This does not solve my issue. I would like the logo next to the title – as it is in the mobile version (it moves so they are horizontal). The only choices I am given are the logo on top or the title on top – but I would like them next to each other.
    http://internationalmarinedebrisconference.org/
    Thanks!

    December 9, 2016 at 5:49 am #25238
    wensolutions
    Keymaster

    Hello @jjambeck,

    The menu title of the website dropped below the logo as the title text used in your website is longer than the site title allocated space as per the theme design.

    Please add the following custom CSS in your Admin Dashboard > Appearance > Customize > Theme Options > Custom CSS Options : to resolve the issue in your website.

    @media screen and (min-width: 1023px){
    #site-header-text h1.site-title {
        margin-top: 32px;
    }
    .row .col.col-7-of-10 {
        width: 40%;
    }
    
    .row .col.col-3-of-10 {
        width: 60%;
    }
    }

    Hope this Helps,

    Best Regards !!

    December 9, 2016 at 5:55 am #25239
    jjambeck
    Participant

    Yes! That is an easy solve for that!
    Now, can the logo be a bit larger on the computer screen view?
    And last one – can the title font color be changed on the mobile screen view?
    With those two addressed, I think the site will be PERFECT!

    December 9, 2016 at 6:09 am #25240
    wensolutions
    Keymaster

    Hello,

    To accomplish your requests, please add in the following Custom CSS :

    @media screen and (min-width: 1023px){
    #site-header-text h1.site-title {
        margin-top: 54px!important;
    }
    .has-logo-site-title #site-logo img {
        width: 117px;
    }
    }
    
    @media only screen and (max-width: 768px){
    #site-branding #site-header-text h1 a, #site-branding .site-description {
        color: #059b78;
    }
    }

    This will make your logo size bigger in the desktop, and will change the color of the text of the site title in mobile view to the color same as in the desktop view. If you want to change the color only for mobile view, please change the “#059b78” color code with the color Hex code of your desired color.

    For reference on color Hex see the link here : http://www.w3schools.com/colors/colors_picker.asp

    Hope this Helps,

    Best Regards !!

    January 4, 2017 at 4:10 am #27457
    jjambeck
    Participant

    This was all great and we are set to launch the site publicly this week – but now I am looking at the mobile site and the logo is large and covers the top of the slider image (pretty minor but would look better not overlapping) and then the title, only on the mobile site, is under the logo again, and not green like in the computer version. I had added the CSS above before and I thought it had worked, but then I updated the version of the theme to the latest. The custom CSS is still there, but the mobile version of the site is not looking like I want it. See the site here http://internationalmarinedebrisconference.org/ and let me know if we can get the title to be the color on the computer version and also have it next to the logo (not under it) on the mobile version. I am overall very happy with this theme and look! Thank you!

    January 4, 2017 at 5:17 pm #27555
    jjambeck
    Participant

    OK, if this is an easier solution, I can just delete the title from the mobile version and just have the logo – if that is easier than moving the title to be next to the logo – as it would also have to change color too since it is now white for some reason and the background is also white (which I like!).
    Thank you!

    January 4, 2017 at 10:58 pm #27578
    wensolutions
    Keymaster

    Hello @jjambeck,

    Please try pasting in the following Custom CSS in your Admin Dashboard > Appearance > Customize > Additional CSS :

    @media (max-width: 768px){
    	div#site-branding div#site-logo{
    		width:20% !important;
    	}
    	.site-menu div#site-header-text {
    	    width: 80%;
    	}
    	#site-header-text h1.site-title {
    	    font-size: 13px;
    	    margin-left: 10px;
    	}
    	#site-header-text h1.site-title {
    	    margin-top: 18px;
    	}
    	#site-branding #site-header-text h1 a{
    		color: #059b78 !important;
    	}
    
    }

    This should put the title beside the logo in mobile view matching the color of the title to same as in the desktop view.

    Hope this Helps,

    Best Regards !!

    January 5, 2017 at 1:23 am #27586
    jjambeck
    Participant

    YES!!! That did it!! But now the Logo is a bit too large on the mobile version – is there a way to make it be a bit smaller on that version only? Thank you so much for the great replies!

    January 5, 2017 at 2:25 am #27597
    wensolutions
    Keymaster

    Hello,

    While we have tested the website with the codes, the logo seems to be lining up to the size appropriate to the title beside it. However it did seem bit clinging to the bottom.

    To re position it a bit aligned to the title, try adding in the following custom CSS :

    @media (max-width: 768px){
    
    .has-logo-site-title #site-logo img {
    
    padding-top: 0px;
    
    }
    
    }

    Hope this Helps,

    Best Regards !!

    January 5, 2017 at 3:30 am #27603
    jjambeck
    Participant

    Yep – it looks much better – thank you! How do I rate the Theme highly – your support on this effort has been awesome. Thank you again!

    January 5, 2017 at 4:57 am #27611
    wensolutions
    Keymaster

    Hello,

    We are very pleased to know that your issue has been solved .
    If there are any further query, then, please feel free to post them.

    We will really appreciate if you could help us too by rating our theme in WordPress repo here:-

    https://wordpress.org/support/theme/flat-commerce/reviews/

    Best Regards!!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.
Log In
Message Icon

Need Expert's Help ?

It's easy. Hire our customizer team for all types of enhancements out-of-the box.

Recent Topics

  • Reducing Gap Between Breadcrumbs/Header Image And Page Content
  • Front page
  • How to disable linked products on the menu page?
  • Hide Site title and Tagline in Desktop but enable in Mobile & Tablet devices
  • Remove Content
  • Main Menu position
  • Looking for a legal business Theme
  • Page title not to be displayed in header image
  • Travel Master Pro Queries
  • Need to remove “Showing all [X] results from Shop page
  • Can’t get rid of the pink
  • Change display of primary menu
  • Site Not Loading correctly after demo data installed
  • Travel Ultimate Pro – Search Bar
  • How can I change the color of icons in Social Menu?
  • Signify Pro – URL & page name issues
  • Header Image
  • Random word instead of page name in header image
  • Gmail klantenservice Belgie
  • Installing Demo Data
  • Item feature
  • Remove spacing in header and footer
  • Cropped header image on inner pages
  • how to change comment size
  • My Back Pain Coach
  • Create navigation menu on page
  • Menus quit working, when I click on the page it just gives a blank page with X
  • how can I change a Header font beyond the proposed font groups?
  • How to include a Search facility on the TOP BAR menu?
  • Changing the text “TOP BAR” and “MENU”
FAQ Faq
Support Forum Support Forum
Theme instructions Theme instructions
Plugin Instructions Plugin Instructions
Logo
Theme Palace is a platform where you can explore amazing themes curated by our team from our experienced designers, as well as from independent creators with secure and standard coding. Moreover we provide plugins from a very experienced developers.

About

  • Themes
  • Plugins
  • Blog

Support

  • Support Forum
  • FAQ
  • Theme Instructions

Legal

  • Terms & Conditions
  • Privacy Policy
Copyright © 2021 Theme Palace. All Rights Reserved
  • Facebook
  • Twitter
Premium WordPress Themes & Plugins Marketplace
Scroll Up

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close