SJBaily

Thank you! That worked perfectly. You are very kind.

Best wishes,

Sydney

Marking resolved. Thanks

Marking resolved.

Wow! Thank you. It’s perfect.

I hope this works. I used We Transfer file share. https://we.tl/XVVOR4Ye87

It just shows that the logo/header image Sydney Jane Baily is off to the right. Thanks, Sydney

Thank you. That worked perfectly!

Hi @letusnotbeweary May be a long wait here. No help, at least for me. So I used an old hack and just put the CSS mentioned above in the appearance section that lets you put in your own code. It worked fine. I can’t figure out where it is getting styled from or not getting styled from because the solution that @kharisblank gave does not work for beneath the header. Anyway, my logo looked better on the left so I no longer have a problem, but if you do, then use this:

.bottom-header-row, #mainnav .menu a:hover {
color: #b1b4b3 !important;
}

I couldn’t get it to work until I added the “important” tag, so something somewhere is styling the hover in the bottom header row bar.

This worked:

.bottom-header-row, #mainnav .menu a:hover {
color: #b1b4b3 !important;
}

I am trying to be clear. I can change the hover color and it works fine when the menu items are up in the top of the header. But when I use the format with the menu items in the bottom row bar, the color is not changing with hover.

Thanks, but as I mentioned in my original post that hover style ONLY works when the menu is in the top of the header, next to the logo. It does not work when the menu is in the bottom row bar BENEATH the header.

Mikepalmer: thanks, that worked. Bummer though because I didn’t really want to clear cache as I had a bunch of tabs open and signed in to various things. Ah well, small price to pay. Thanks again for the nudge.

Hi, I have the same bouncing balls in Firefox as some other users here with my site never loading. Seems OK in Chrome and Edge. I don’t want to disable the bouncing balls. I’ve always liked them! I’ve tried uninstalling and reinstalling the Sydney Toolbox as suggested above. That didn’t help. Any other suggestions?
My site https://sydneyjanebaily.com

@burlesonbrad Hi Brad, Thanks for the effort. I do know about the @media, but can’t seem to make it work. Found some others with my issue and they used the following:

/* Logo size for mobile site */
@media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 322px !important;
}
}

/* Logo size for desktop site */
@media screen and (min-width: 768px) {
.site-header .site-branding img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
height: auto;
max-height: none;
max-width: none;
width: 322px !important;
}
}

I even added the .custom-logo-link img and tried a few variations because 322 was not necessarily the size I needed, but to no avail. I cannot see where but perhaps some tweak I have already done in the Boutique style.css to the header to make the desktop version look as I want it to is overriding or maybe . . . I don’t know. I am hoping someone can look at my Boutique style.css added below and help.

Customized Storefront child Boutique style.css:

/* Creates the back to top button */
.topbutton {
height:50px;
width:50px;
position:fixed;
right:320px;
bottom:60px;
z-index:8;
background-image: url("https://www.seasonedandsexy.com/wp-content/uploads/2017/05/top_button.png");
background-repeat:no-repeat;
display:none;
}

.page-template-template-homepage, .widget_product_search form input[type="search"], .widget_product_search {
display:none !important;
} 

/* Logo size for mobile site */
@media screen and (max-width: 768px) {
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
	max-height: none !important;
        max-width: none !important;
        width: 322px !important;
}
}

body {
  background: #303030;
  -webkit-font-smoothing: subpixel-antialiased; }

body,
button,
input,
select,
textarea {
  font-family: 'Lato', sans-serif; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  letter-spacing: 0 !important; }
  h1 a,
  h1 label,
  h2 a,
  h2 label,
  h3 a,
  h3 label,
  h4 a,
  h4 label,
  h5 a,
  h5 label,
  h6 a,
  h6 label {
    font-weight: 400; }

h1.woocommerce-products-header__title {
    color: #a80021; }

.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6 {
  font-weight: 400; }
  
.site-header {
  border-bottom: 0; }

.site-header, .header-widget-region {
    box-sizing: content-box;
}

.site-header {
    max-width: 67.141em;
    margin-left: auto !important; 
        background-repeat:no-repeat !important;
        }

.site-header {   
        margin-right: auto;
        padding-top: 0px;
        padding-right: 6em;
        padding-bottom: 0px;
        padding-left: 6em;
    box-sizing: content-box;
    clear: both;
}

.site-branding .site-title {
  font-family: 'Playfair Display', serif; }

.site-branding .site-title a {
  font-weight: 400; }

.storefront-product-section {
  margin-bottom: 4.236em; }

.storefront-product-section,
.hentry {
  border-bottom-style: double;
  border-bottom-width: 3px;
  border-bottom-color: rgba(0, 0, 0, 0.025); }

.sku_wrapper {
display:none !important;
}

.woocommerce-tabs ul.tabs li a,
.woocommerce-product-rating,
.woocommerce-breadcrumb {
  text-transform: uppercase; }

.woocommerce-breadcrumb {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .woocommerce-breadcrumb a {
    text-transform: none; }

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
  color: inherit;
  background: rgba(0, 0, 0, 0.025); }
  .woocommerce-error a,
  .woocommerce-error a:hover,
  .woocommerce-error .button,
  .woocommerce-error .button:hover,
  .woocommerce-info a,
  .woocommerce-info a:hover,
  .woocommerce-info .button,
  .woocommerce-info .button:hover,
  .woocommerce-message a,
  .woocommerce-message a:hover,
  .woocommerce-message .button,
  .woocommerce-message .button:hover,
  .woocommerce-noreviews a,
  .woocommerce-noreviews a:hover,
  .woocommerce-noreviews .button,
  .woocommerce-noreviews .button:hover,
  p.no-comments a,
  p.no-comments a:hover,
  p.no-comments .button,
  p.no-comments .button:hover {
    color: inherit;
    font-weight: normal; }
  .woocommerce-error a,
  .woocommerce-info a,
  .woocommerce-message a,
  .woocommerce-noreviews a,
  p.no-comments a {
    text-decoration: underline; }

.woocommerce-error {
  border-left-color: #e2401c; }

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  border-left-color: #3D9CD2; }

.woocommerce-message {
  border-left-color: #a80021; }

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
  margin-bottom: 0; }

.home h1 { display:none }

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget-area .widget a.button,
.site-header-cart .widget_shopping_cart a.button {
  box-shadow: inset 0 -0.327em 1.618em rgba(0, 0, 0, 0.1); }

button.menu-toggle {
  margin-bottom: 0; }

.boutique-primary-navigation {
  -webkit-font-smoothing: antialiased; }
  .boutique-primary-navigation::after {
    clear: both;
    content: "";
    display: table; }

.main-navigation ul li a::before {
    display: inline-block;
    font-size: inherit;
    -webkit-font-smoothing: antialiased;
    content: none !important;
    margin-right: .5407911001em;
}

.main-navigation ul.menu > li > ul,
.main-navigation ul.menu ul,
.site-header-cart .widget_shopping_cart {
  background-color: #212121; }
  
.main-navigation ul.menu, .main-navigation ul.nav-menu {
    text-align: right;
}

.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a, .site-footer .storefront-handheld-footer-bar a:not(.button), button.menu-toggle, button.menu-toggle:hover {
    color: #ffffff;
}

.main-navigation ul li a:hover, .site-title a:hover, ul.menu li a:hover, .site-branding h1 a:hover {
    color: #a80021;
}

.main-navigation ul.menu, .main-navigation ul.nav-menu {
    max-height: none;
    overflow: visible;
        overflow-x: visible;
        overflow-y: visible;
        }
        
.handheld-navigation  { 
  content: "" !important;   
        }

.woocommerce-pagination .page-numbers li .page-numbers.current, .widget a.button.checkout {
    background-color: #a80021;
    border-color: #a80021;
    color: #ffffff;
}

.storefront-primary-navigation {
  background-color: transparent; }

.posted-on,
.byline {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .7em; }

.hentry .entry-header {
  border-bottom-width: 0;
  margin: 0 0 3.631em; }
  
  
.widget h3.widget-title,
.widget h2.widgettitle {
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  font-style: italic;
  font-weight: 400; }

.hentry .entry-header h1 {
  border-bottom: 4px double rgba(0, 0, 0, 0.1);
  padding-bottom: .618em; }

.col-full,
.header-widget-region {
  box-sizing: content-box; }

.header-widget-region {
  margin: 0; }
.header-widget-region .col-full {
    background: #fff;
    padding: 0 1em; }
.header-widget-region .widget {
    padding-top: 2.244em; }
    
    
.woa-top-bar .block .widget {
    font-size: 18px;
    letter-spacing: 2px;
}

.site-content .col-full {
  background: #fff;
  padding: 1.618em;
  box-shadow: inset 0 0 0 .53em #f6f6f6; }

.site-footer {
  padding: 0; }
  
.site-footer {
    background-color: transparent;
    color: #777777;
}
  
.site-footer .col-full {
    background: #d3d3d3;
    padding: 1.618em; }
    
.site-info {
    padding: .617924em 0;
}

.woocommerce-breadcrumb {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: transparent !important; }

.site-header-cart {
  margin-bottom: 0; }

/*
ul.products li.product {
  overflow: visible; }
  ul.products li.product .price {
    position: absolute;
    top: .618em;
    right: 1px;
    padding: .53em .857em;
    background: #555;
    color: #fff;
    font-weight: 700;
    box-shadow: 5px 0 0 0 #555; }
    ul.products li.product .price:after {
      content: "";
      display: block;
      position: absolute;
      right: -5px;
      top: 100%;
      border: 5px solid transparent;
      border-top-color: #222222;
      border-left-width: 0; }
    ul.products li.product .price del {
      font-weight: 400;
      opacity: 0.5; }
  ul.products li.product .onsale {
    display: none; }
  ul.products li.product img {
    border: 1px solid rgba(0, 0, 0, 0.1); }
*/ 

.single-product .images img {
  border: 1px solid rgba(0, 0, 0, 0.1); }

table.cart td.actions {
  border: 0;
  padding-top: 1.618em; }

.widget_product_categories ul li:before,
.widget_categories ul li:before {
  content: "\f07b" !important; }

.widget_product_categories ul li.current-cat:before,
.widget_categories ul li.current-cat:before {
  content: "\f07c" !important; }

.widget_recent_comments ul li:before {
  content: "\f075" !important; }

.widget_archive ul li:before {
  content: "\f07c" !important; }

.widget_recent_entries ul li:before, .widget_pages ul li:before {
  content: "\f15c" !important; }

.page-template-template-homepage .site-main {
  padding-top: 0; }
  .page-template-template-homepage .site-main > .type-page:first-child {
    width: auto !important;
    margin-left: 0 !important; }
    .page-template-template-homepage .site-main > .type-page:first-child.hentry .entry-header {
      margin-left: auto;
      margin-right: auto; }
      .page-template-template-homepage .site-main > .type-page:first-child.hentry .entry-header h1 {
        font-size: 2.618em; }
    .page-template-template-homepage .site-main > .type-page:first-child .col-full {
      padding: 0;
      background: none;
      box-shadow: none; }

.content-area,
.widget-area {
  margin-bottom: 0; }

.woocommerce-checkout.scc-distraction-free-checkout .boutique-primary-navigation {
  display: none; }

.woocommerce-checkout.scc-distraction-free-checkout .site-header {
  margin-bottom: 0; }

.sph-hero .col-full {
  background: transparent;
  box-shadow: none; }

@media screen and (min-width: 768px) {
  .col-full {
        padding: 0 5.874em; }
  .boutique-primary-navigation {
    border-top-left-radius: 0.327em;
    border-top-right-radius: 0.327em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -0.53em rgba(0, 0, 0, 0.05);
    background: #212121;
    clear: both; }
    
  .storefront-primary-navigation {
    clear: both;
    background: rgba(0,0,0,.06);
        background-color: rgba(0, 0, 0, 0.06);
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-clip: border-box;
        background-origin: padding-box;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    margin-left: -99em;
    margin-right: -99em;
    padding-left: 107em;
    padding-right: 107em;
} 

  .site-branding,
  .site-search,
  .site-header-cart,
  .site-logo-anchor,
  .custom-logo-link {
    margin-bottom: 4.236em; }
  .site-header {
    padding-top: 19em; }
  .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a,
  .site-header-cart .cart-contents {
    padding-bottom: 0.2em !important;
    padding-top: 0.418em; }
  .site-content .col-full,
  .site-footer .col-full,
  .header-widget-region .col-full {
    padding: 0em 6.2em; }
  .header-widget-region .col-full {
    padding-top: 0;
    padding-bottom: 0; }
  .site-footer .col-full {
    padding: 2.618em 6.2em;
}
  .main-navigation ul.menu li.current-menu-item > a {
    position: relative; }
  .main-navigation ul.menu li.current-menu-item > a:before {
      content: none !important;
      display: block;
      position: absolute;
      top: 100%;
      left: 50%;
      border: .618em solid transparent;
      border-top-color: #212121;
      margin-left: -.618em; }
  .main-navigation ul.menu ul,
  .main-navigation ul.nav-menu ul {
    background: #212121; }
  .main-navigation .smm-mega-menu {
    margin-left: 0;
    margin-right: 0;
    padding: 4.236em 5.874em;
    background-color: #212121 !important; }
  .main-navigation .smm-mega-menu ul {
      background-color: transparent !important; }
  .sd-sticky-navigation .main-navigation .smm-mega-menu {
    margin-left: -5.874em;
    margin-right: -5.874em; }
  .page-template-template-homepage-php .content-area {
    width: 73.9130434783%;
    float: left;
    margin-right: 4.347826087%; }
    .page-template-template-homepage-php .content-area .columns-3 ul.products li.product {
      width: 29.4117647059%;
      float: left;
      margin-right: 5.8823529412%; }
  .page-template-template-homepage-php .boutique-featured-products .storefront-product-section {
    margin-left: -5.874em;
    margin-right: -5.874em;
    padding: 0 5.874em;
    background: rgba(0, 0, 0, 0.025);
    padding-top: 3.632em;
    padding-bottom: 1em;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 0 0.53em rgba(0, 0, 0, 0.025); }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product span,
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .button,
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .star-rating {
      display: none; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product h3,
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price {
      display: block;
      position: absolute; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product h3 {
      top: 0;
      left: 0;
      z-index: 99;
      -webkit-transition: all ease .2s;
      transition: all ease .2s;
      color: #f6f6f6;
      opacity: 0;
      width: 100%;
      text-align: left;
      padding: 1.618em;
      color: #303030;
      opacity: 0; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price {
      bottom: 0;
      right: 0;
      top: auto;
      z-index: 99; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product .price span {
        display: block; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product img {
      margin: 0; }
    .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a {
      display: block; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #fff;
        opacity: 0;
        -webkit-transition: all ease .2s;
        transition: all ease .2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:before {
        content: "";
        display: block;
        position: absolute;
        top: .618em;
        left: .618em;
        right: .618em;
        bottom: .618em;
        border: 4px double rgba(0, 0, 0, 0.1);
        z-index: 9;
        opacity: 0;
        -webkit-transition: all ease .2s;
        transition: all ease .2s; }
      .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover h3, .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover:after, .page-template-template-homepage-php .boutique-featured-products .storefront-product-section ul.products li.product > a:hover:before {
        opacity: 1; 
}
  .page-template-template-homepage-php .boutique-featured-products .hentry {
    padding-bottom: 0;
    border-bottom: 0; }
  .page-template-template-homepage-php .boutique-featured-products .entry-header h1 {
    text-align: center; }
  .page-template-template-homepage .content-area .sph-hero,
  .page-template-template-homepage .content-area .sprh-hero {
    margin-top: 0 !important; }
    .page-template-template-homepage .content-area .sph-hero.full,
    .page-template-template-homepage .content-area .sprh-hero.full {
      margin-left: 0 !important;
      margin-right: 0 !important; }
  .page-template-template-homepage .boutique-featured-products .sph-hero.full,
  .page-template-template-homepage .boutique-featured-products .sprh-hero.full {
    margin-left: -5.874em;
    margin-right: -5.874em; }
  .page-template-template-homepage.left-sidebar .content-area {
    width: 73.9130434783%;
    float: right;
    margin-right: 0; }
  .page-template-template-homepage.left-sidebar .widget-area {
    width: 21.7391304348%;
    float: left;
    margin-right: 4.347826087%; }
  .sph-hero .col-full,
  .sprh-hero .col-full {
    background-color: transparent;
    padding: 0; }
  .sph-hero h1,
  .sprh-hero h1 {
    font-weight: 400; }
  .site-main .sph-hero .overlay,
  .site-main .sprh-hero .overlay {
    padding: 4.236em; } }

@media screen and (max-width: 768px) {
  .col-full {
    padding: 0 1em;
    margin: 0 1em;
     }
 
  .boutique-featured-products .sph-hero.full,
  .boutique-featured-products .sprh-hero.full {
    margin-left: -1em;
    margin-right: -1em; }
  .boutique-featured-products .storefront-product-section,
  .boutique-primary-navigation {
    margin-left: -1em;
    margin-right: -1em;
    }
  .boutique-primary-navigation {
    padding-top: 0;
     }
  .boutique-primary-navigation button.menu-toggle {
      margin-top: 0; }
  .site-content .col-full,
  .site-footer .col-full {
    padding-left: 1em;
    padding-right: 1em; } }
    
    /*margin at bottom of footer widget area */

#footer-widgets {

margin-bottom: 0px ! important;

}

I have tweaked alot of padding and margins, mostly to make the site-header the same width as the page column. Sorry site is not live or I would show you.

Because this is marked “resolved” does that mean I should start a new thread for the same topic? I have tried SiteOrigin but my header and nav pane are so messed up, I can’t figure out how to fix it. I am using Storefront with the Boutique child theme and am putting my changes in the Boutique’s functions.php file.
I wanted a bigger header but now my nav pane runs along the header and the nav pane is hovering above the main content. I don’t know where to start.

Thanks in advance.

Help. This code above doesn’t work for me. I really need to disable the lightbox/zoom because it calls in full size images in the lightbox. I sell images so the shop must only show watermarked images and full-size images have no watermark because those are the ones that can be downloaded after purchase.

Should this code work with any theme. Mine is Create by Catchthemes and I put the code in the child functions.php but it didn’t do anything.

Thanks.