[Resolved] Header Logo Nav Layout

[Alan]

Ok. Its now looking ok on a desktop.

The mobile isnt looking so good. It doesnt seem to be stacking and Im left with 2 narrow side by side columns.

Im getting a warning in the css

Its a Media error – Expected (row | row-reverse | column | column-reverse ) but found “columns”.

[Alan]

I’ve managed to get it to stack on a mobile by changing this

@media (max-width: 768px) {
    .header-section {
        flex-direction: columns;
    }
}

to this

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }
}

Is that ok?

Once I had done that I noticed that they now stacked on a mobile but they were only displaying at about 50% screen width. I also wanted the text alignment to be aligned left on a desktop but aligned center on a mobile. I already had the alignment set to left in the ELEMENT settings so I wrote some more css (always dangerous) to fix both problems and added this. It now looks ok but there is bound to be a better way.

@media (max-width: 768px) {
    .header-section .header-section-1   {
    width: 100%;
    text-align: center;		
    }
}

@media (max-width: 768px) {
    .header-section .header-section-2 {
    width: 100%;
    text-align: center;		
    }
}

I haven’t managed to add 80px of padding between section one and section two. I tried adding

padding: 0px 40px 0px 40px;

but that threw the mobile view out so I removed it. I need help with that.

Here is the total code.

/*== Header Left and Header Right ==*/
.header-section {
    display: flex;
}

.header-section .header-section-1 {
    width: 60%;

}
.header-section .header-section-2 {
    width: 40%;

}

@media (max-width: 768px) {
    .header-section {

flex-direction: column;

    }
}

@media (max-width: 768px) {
    .header-section .header-section-1   {
    width: 100%;
	  text-align: center;		
    }
}

@media (max-width: 768px) {
    .header-section .header-section-2 {
    width: 100%;
	  text-align: center;		
    }
}

.header-section h2 {

  color:#ec1a22!important;         
  font-size: 36px ! important;
  font-family: inherit;
  font-weight:600 ! important;
  margin-bottom: 20px ! important;
}

.header-section p {
   
  color:#333333!important;      
  font-size: 20px ! important;
  font-family: inherit;
  font-weight:400 ! important;
  line-height: 30px;
  margin-bottom: 20px ! important;
}

Could you please check this for me and simplify and fix if necessary 🙂

[David]

Hi there,

first remove this CSS:

.header-section {
    display: flex;
}

.header-section .header-section-1 {
    width: 60%;
}

.header-section .header-section-2 {
    width: 40%;
}

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .header-section .header-section-1   {
    width: 100%;
	  text-align: center;		
    }
}

@media (max-width: 768px) {
    .header-section .header-section-2 {
    width: 100%;
	  text-align: center;		
    }
}

And now think mobile first without the columns – the only difference to desktop is to align the text centered so add this:

.header-section {
    text-align: center;
}

Then we add the desktop changes like so:

@media (min-width: 769px) {
    .header-section {
        display: flex;
        text-align: left;
    }
    .header-section-1 {
        flex: 0 0 60%;
        margin-right: 80px;
    }
}

So flex only applies to desktop, left aligns the text and then tells the first section to be at set 60% width of the container. By default flex doesn’t wrap so the second section will fill whatever space is left ( if possible ).

[Alan]

Hi David

Wow you certainly simplified that! I really appreciate how you explained the reasons behind the changes. Awesome support from you and Leo. You guys are amazing. Thanks 🙂

Everything seems to look better on a mobile with this theme than what it did with my last one. Is it possible to change the stacking order so that on a mobile, my logo appears first and then the phone appears below it.

Thanks

[David]

You’re welcome.
May i ask why you’re using the top bar for the logo and phone number?
Ideally you should use the Site Header, with the logo added to the customizer and the phone number added to the header widget. It will still require some CSS for mobile ordering.

Let me know.

If you want to keep on using the top bar then this CSS:

@media (max-width: 768px) {
    .inside-top-bar {
        display: flex;
        flex-direction: column-reverse;
    }
}

[Alan]

I thought that to begin with I would recreate the same layout that I had with the last theme with the logo and phone number in the white area above the nav like it is now. Once the website is looking ok and I have the time I wanted to create a nicer looking header / nav layout.
I would ultimately like to do away with that separate van image and find a nice background image. I would like a header layout like “Get Merch” or “Mellow”.

I seem to have a small problem whereby the header widget seems to be auto populating itself and I end up with the new van image thats part of what we created in “Elements” and a second van image thats in Header Widgets. I delete the one in Header Widgets and publish and its gone but it somehow comes back again later. Ive gone to Appearance – Widgets and removed all unsused widgets but it seems to reappear in Header Widgets again later on.

[David]

Odd .. sounds like a caching issue – do you have any plugin or server side caches? If so try flushing them and ideally disabling them when building/customizing

[Alan]

Yes I have got WP Super Cache. Those things can be a real pain at times. Ive just deleted the cache. Maybe that was it.

[Alan]

Ideally you should use the Site Header, with the logo added to the customizer and the phone number added to the header widget. It will still require some CSS for mobile ordering.

Im just trying to figure out what that would look like. Can you tell me which template in the site library that would look like? I like “pixel” but Im not sure where the phone would go and I would probably need a new background image because the current grey background up against the white navigation / logo area would not be too good.

Thanks

[Leo]

We don’t have a site in the library that uses the layout but it would look like this:
https://www.screencast.com/t/kjmonkkvm6

That’s what you requested before and I did provide the same instruction.

Sometimes it’s best to implement our suggestions first and go from there.

[Alan]

Sorry Leo. I didnt get what you meant the first time. I’m not sure if I have it right now but the logo and the phone number are now in the header.

[Leo]

Awesome 🙂

[Author]

Posts