reduce space nav/content

  • losrack

    (@carlos-jaramillo)


    9 years, 4 months ago

    Hi,

    I would love to reduce the space between navigation and content.

    my site is;

    1-diez.com

    So far I have tried, but it did not work at all … may be the padding of the logo?

    .main-navigation,
.woocommerce-active .site-header .site-header-cart {
padding-top: 0;
}

.woocommerce-active .site-branding, .woocommerce-active .site-logo-anchor {
margin-bottom: 0;
}

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a,.site-header-cart .cart-contents.site-header-cart .cart-contents {
padding-bottom: 0;
}

    Any help would be much appreciated.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    The only spacing that is added to the content area is with this css on the homepage area.

    .page-template-template-homepage .site-main {
    padding-top: 4.236em;
}

    Or under the breadcrumb navigation on the internal sections.

    .woocommerce-breadcrumb {
    margin-bottom: 4.236em;
}

    I hope this helps.

    Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    [Dupe Post]

    Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

    Thread Starter losrack

    (@carlos-jaramillo)

    Hi Stuart,

    It did not work. I have tried so many things, included your code …

    This is driving me nuts…

    May be the space reserved for breadcrumbs .. how can I get rid of them?

    Thanks for the help anyways …

    I tried

    .woocommerce-breadcrumb {
  display: none;
}

    Hi,

    I am not a professional developer but have been playing around storefront theme as part of self-learning to customize my online store (under development).

    In my case, I use all my customization in theme customization plugin developed by storefront theme author. The code snippets suggested by Stuart Duff (above) works just fine.

    I hope this is helpful, otherwise please let me know.

    Thread Starter losrack

    (@carlos-jaramillo)

    I have tried several things, but this space is stubborn.

    I have made all my customizations under a child theme in custom css and functions.php

    I would love to get rid of this space…

    Any other ideas?

    thks!

    Hi,

    Try adding following selector:

    @media screen and (min-width: 768px)
.site-content .woocommerce-breadcrumb {
  .woocommerce-breadcrumb {
    margin-bottom: 4.236em;} /* make changes here */
}

    In my test site, I have used the following code to adjust paddings/margins & it works.

    .site-content .woocommerce-breadcrumb {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.857em;
    margin-bottom: 1.118em;
    padding: 0;
	}

    If you want to remove breadcrumb altogether, you might have to remove the hook/filer (which I am not good at!). Thanks

    Carlos,

    How did you get your menu next to your logo and remove the space between nav and content?

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘reduce space nav/content’ is closed to new replies.