How can I adjust header item positioning in CSS?

Technical Q&A
1

Hey everyone,

I’m looking for some assistance on getting some of the header items positioned out how I would like them.

Full disclosure, I have not touched any code in about 12 years, and my previous experience was minor, at best.

In essence, I’m trying to center the header logo image, as opposed to it being offset to the left, as well as centering the navigation bar under the header.

Here’s what the header code started as:

.header {
  position: relative;
  padding: 13px 0;
  background: var(--header-background);
  color: var(--header-text-color);
  transition: margin-bottom 0.25s ease-in-out;
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.header__inner--centered {
  justify-content: center;
}

.header__logo-link {
  display: block;
}

.header__logo {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}

.header__logo-image {
  display: block;
  vertical-align: middle;
  max-height: 130px;
}

I made changes to two items. .header__logo and .header__logo-image.

Here’s the changes I made:

.header__logo {
  display: inline-block;
  margin-left: 280px;
  margin-right: auto;
  margin-bottom: 0;
}

.header__logo-image {
  display: inline-block;
  margin-left: 280px;
  margin-right: auto;
  max-height: 200px;
}

(I need to change the px values to center it better, but this worked for my testing purposes of moving it.)

So, this (admittedly bad) code has re-aligned my logo. However, when swapping to mobile view, it’s continuing with the heavy left margin. My hope was that it would stay as is on mobile, because there’s a separate section for mobile nav/header.

The other thing I was going to consider trying, after reading, was potentially turning the header into a flex-container to see if I can position the elements better that way. I’m absolutely out of my depth, but I have the time to learn and am trying to get this rolling as best as I can.

The main theme template is Warehouse, if anyone has any insight, that would be wonderful.

Thank you!

1 Like
2

@DevinM i will suggest to share the store preview

here the tutorial you will get the css display flex used now days please refer those reference

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

3

Here’s the preview link.

Appreciate the resource for learning about the flex formatting.

I’d like to avoid it, if possible, because I feel like that will require a significant more amount of work vs making other adjustments. But if I can’t get another solution, then I guess I’ll have to hit the books.

4

Hello,

Today’s front-end dev is worlds better than years ago.

Open up your browser and rightclick and select inspect. Select your header and look at the html.

The css with a dot “.” are classes and those without a dot are names.

In the tags, look for

and some have

This is how you know what css goes with what tag.

Best part is you can change the css and it shows up live.

There are other browsers with similar features, but below is an example with google chrome.

https://www.youtube.com/watch?v=dlQrFFwAC_A

There is also a way to debug a page on mobile using a usb connector.

Message me for more info.