How can I adjust the size of the navigation bar in the Dawn theme?

Store Design
1

Hi All,

I am trying to get the header from https://prettylittlepeachez.myshopify.com/collections/all to look exactly like the one on https://plpeaches.wpengine.com/

I believe it’s just a size issue, everything else seems fine. Or maybe is it the logo size? I’m not sure. Can someone please provide code to adjust the nav bar size to do this?

Current look: (https://prettylittlepeachez.myshopify.com/collections/all)

Screen Shot 2022-04-06 at 11.18.52 PM.png
Screen Shot 2022-04-06 at 11.18.52 PM.png2558×648 44.5 KB

How I want it to look: (https://plpeaches.wpengine.com/ )

Screen Shot 2022-04-06 at 11.18.58 PM.png
Screen Shot 2022-04-06 at 11.18.58 PM.png2560×386 41 KB

2

@mostafamoussa

you have use home page at third party page builder right?

3

Yes

4

Yes I am using wordpress for homepage. Would like to get the headers as similar as possible

5

@mostafamoussa

Please add the following CSS code to the assets/base.css bottom of the file.

@media screen and (min-width: 990px){
.header {
    max-width: 80% !important;
    margin: 0 auto !important;
}

.header {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
}

Thanks!

6

Hi @mostafamoussa ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media screen and (min-width: 1025px){
  .header {
    max-width: 80% !important;
    margin: 0 auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.