How To Move Menu Bar To Top Of Page (Above Logo)

How can I move the menu bar above the logo …

It looks like you’ve created a child theme. There are a couple of things you can do:

1. I don’t know how comfortable you are with making changes to PHP code, but you can move the menu bar above the logo by making a copy of the header.php file and moving the nav-wrapper <div> above the site-branding <div>.
2. Otherwise, you can add some flexbox CSS to your child theme’s style.css file to change the order:

   header {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column;
   }
   #nav-wrapper {
      order: 1;
   }
   .site-branding {
      order: 2;
   }

… and make my logo adjusted better on my site?

Exactly what do you mean by “adjust better?”

It seems that you’ve turned the theme into a fixed-width layout? Or is that how the Pro version of Sugar and Spice works? The logo will resize at different screen widths, but there are a couple of CSS rules which prevent the page from resizing. The width property for both the footer and the page are being set to 1000px (actually, the footer is being set to 1000px and the page is being set to 1008px), so the logo isn’t going to shrink down because the page isn’t able to shrink down.

Thanks for your help. That fixed everything.

I have one more question. I have woocommerce and I am trying to make my catalog images larger curlsandmelanin.com/shop

I have tried a lot of different things all day and I am still stuck.

The size of the image is going to depend upon the size of the container, and the size of the container is going to determine how many items can fit across on a row. Right now, the container width is set to 22.05%, meaning about four items will be able to fit across on a standard desktop screen. When the width of the screen drops below a tablet width (768px), then the width of each item goes to 48%, so two items will be displayed across on a row.

If you want to make the items bigger on desktop widths, you can change the item width to 29%, which will still give you three items across (the number of items that you currently have) and have them fill the entire row space:

@media only screen and (min-width: 768px) {
   .woocommerce ul.products li.product,
   .woocommerce-page ul.products li.product {
      width: 29%;
   }
}

WOW! I’ve been trying to do that for a weeks. Thanks so much! You’ve been so much help!

I have two more questions.

1. How can I add a different background color to the menu bar?
2. How can I remove the gray lined border thats centered in the middle of my site?

curlsandmelanin.com

.no-ribbon nav#main-nav {
      background-color: rgba(190, 190, 190, 1.0);
      width: 100%;
}
nav#main-nav > ul:before, nav#main-nav > ul:after {
      background-image: none;
}

The first rule changes the background color of the menu. In the rule above, the value is a gray color. You can use this color picker to choose your own color values. Use the width property in that rule if you want the menu to stretch all the way across (right now the width is set to 99%).

The second rule removes the gray border above and below the menu bar. You can leave this rule out if you still want the borders. I’m not sure if this is what you mean by the gray border in the middle of your page.

Thanks for that.

And no that is not what I meant by the gray border. Do you see how my site background is not completely white. Besides the gray menu border there is a gray square boxing all the site content.

OK, it was hard to see on your home page but I see it now on your About page. You can remove the gray border around the content using this rule:

.no-border #page {
   box-shadow: none;
}

By the way, you have a stray line at the end of your child theme’s style.css file. You should remove this line:

text-decoration: overline underline;

Second, you should make it a habit of putting all of your media queries at the very end of your stylesheet. Media queries are the rules which start with @media only .... Putting them at the end helps to insure that you won’t accidentally override them with a “normal” rule.

Thanks for all your help.

Now that the border is gone is there a way I can stretch the length of the black menu bar to be full length across my site. Also can I push the menu bar up to the top more to remove that white space?