Return to previous page

Edit Medium Header Logo Size and Menu Padding

This topic has 14 replies, 3 voices, and was last updated 8 years, 4 months ago ago by Eva Kemp

  • 13 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    June 28, 2016 at 10:39

    Hello,

    If you want to decrease logo image size add this code in Custom CSS for desktop section:

    .header-logo img {
    max-width: 150px;
}

    Best regards,
    Jack Richardson.

    #131388 Copied
    Avatar: totchers
    totchers
    Participant
    July 11, 2016 at 18:14

    I do have that in my child theme’s stylesheet:

    .header-logo img {
  max-width: 200px;
  float: left;
}

    The logo still reverts to a larger size (250px) when the screen is 1000-1200px wide, however. It also has different padding for this screen size.

    #133229 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    July 11, 2016 at 18:34

    Hello,

    Please try that code in Global Custom CSS section.

    Regards,
    Eva Kemp.

    #133235 Copied
    Avatar: totchers
    totchers
    Participant
    July 11, 2016 at 18:37

    Perfect! Thank you. Do you suggest I place all changes in the Global CSS instead of the child theme’s stylesheet?

    #133236 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    July 12, 2016 at 09:37

    Hello,

    You can use either Global Custom CSS or child style.css file. You won’t lose changes with both methods after theme update. If you created child theme you can make all style modifications in child style.css file.

    Regards,
    Eva Kemp.

    #133272 Copied
    Avatar: totchers
    totchers
    Participant
    July 13, 2016 at 17:04

    Thanks! I have migrated my custom css to the theme options instead of the child theme stylesheet.

    One last thing: How do I change the padding of the logo, search icon, and shopping bag icon when the container is 940px? It seems that everything I do in css works only when the container is 1140px wide (on larger screens).

    When the container is 940px the logo, search icon, and shopping bag icon squeeze too close to the menu: The logo is 20px too far to the right. And the search and shopping bag icons are 40px too far to the left.

    #133462 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    July 13, 2016 at 17:36

    Hello,

    Please show on a screenshot what you want to achieve.

    Thank you.
    Regards,
    Eva Kemp.

    #133470 Copied
    Avatar: totchers
    totchers
    Participant
    July 13, 2016 at 17:46

    All good This is good! This logo and shopping cart do not have padding so they are flush with the edges of the 1140px-wide container.
    Problem: Padding added when container is 940px
    I want to make the 940px-wide container also have the logo and shopping cart have no padding.
    Needs work.

    #133474 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    July 13, 2016 at 17:59

    Hello,

    When I check the site in 940px screen size I see mobile header, not the desktop one like you showed.
    Please view the screenshot http://prntscr.com/bsguh4
    Do you want to remove padding there?

    Regards,
    Eva Kemp.

    #133479 Copied
    Avatar: totchers
    totchers
    Participant
    July 13, 2016 at 18:01

    If you make the screen size 1100px wide the container will be 940px. I don’t mind the padding with the mobile header. Thanks!

    #133480 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    July 13, 2016 at 18:46

    Hello,

    Please try to use this code in Custom CSS for desktop section:

    .header-type-15 .main-header > .container {
    padding-left: 15px;
    padding-right: 0px;
}
.cart-bag {
   padding: 12px 0px 0 !important;
}

    Regards,
    Eva Kemp.

    #133489 Copied
    Avatar: totchers
    totchers
    Participant
    July 13, 2016 at 20:45

    That works, thank you so much! That is all I needed.

    #133494 Copied
    Avatar: Eva
    Eva Kemp
    Support staff
    July 14, 2016 at 07:51

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

    #133519 Copied

  • Tagged: , , , , , ,

  • Viewing 14 results - 1 through 14 (of 14 total)

The issue related to '‘Edit Medium Header Logo Size and Menu Padding’' has been successfully resolved, and the topic is now closed for further responses

8theme customization service

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Online Courses – WordPress WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme
lazy-placeholder
Digital Marketing – WordPress WooCommerce Theme
lazy-placeholder
Delivery – WordPress WooCommerce Theme
lazy-placeholder
Landing Watch – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme
lazy-placeholder
Medical 02 – WordPress WooCommerce Theme
lazy-placeholder
Animals Store – WooCommerce Theme
lazy-placeholder
HandMade Store – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.