[Resolved] Header Logo Nav Layout

Home Forums Support Header Logo Nav Layout

This topic contains 41 replies, has 3 voices, and was last updated by  Leo 1 week, 1 day ago.

Viewing 12 posts - 31 through 42 (of 42 total)
  • Author
    Posts
  • #954638

    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”.

    #954713

    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 🙂

    #954820

    David Customer Support

    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 ).

    #955318

    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

    #955361

    David Customer Support

    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;
        }
    }
    #955388

    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.

    #955391

    David Customer Support

    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

    #955463

    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.

    #955467

    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

    #955470

    Leo Customer Support

    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.

    #955539

    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.

    #956031

    Leo Customer Support
Viewing 12 posts - 31 through 42 (of 42 total)

You must be logged in to reply to this topic.