How do I center the header menu for the Dawn theme?

Store Design
1

Does anyone know how to perfectly center the header menu for the Dawn theme if it has been made to be in a horizontal layout?

I placed this code in theme.liquid under element:

@media(max-width:767px){ header-drawer{ display:none !important } .header__inline-menu{ position:absolute; Inset:30px; display:block !important; top:auto } ul.footer-block__details-content.list-unstyled { column-gap: 15px !important; } }

See attached screenshot, notice how the menu looks a little more closer to the left side than the right side.

My website is www.fracture-usa.com

Password is wildwest.

Thanks in advance!

Screen Shot 2022-09-17 at 9.48.44 PM.png
Screen Shot 2022-09-17 at 9.48.44 PM.png752Ă—1554 83.4 KB

2 
.header__inline-menu {
    position: absolute;
    Inset: 30px;
    display: block !important;
    top: auto;
    text-align: center;
}
3

Hi @rchmndfrctre .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file base.css

.header__inline-menu{
text-align: center !important;
}

Hope this helps.

Best Regards;

Pagefly

4

Hi @rchmndfrctre

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
@media only screen and (max-width: 768px){
nav.header__inline-menu{
 text-align-last: center !important;
}
}
5

This worked, thank you!

6

Hi Pagefly. I saw you answer the question about horizontal menus in another question. I have also copied and pasted the code as Fracturerich described and it worked when I went to preview the store. But when I went back to customise store the changes were gone. I also tried to move the horizontal menu to the centre and couldn’t. Many thanks for any help you can give.

Kind regards,

Lyndell

7

Hello! I am having the same issue with the Dawn theme and I tried this but it didn’t work! :disappointed_face: Am I doing it wrong? Does it have to be placed in a certain spot within the base.css?

8

hi, i have tried this and it worked

however, its a mess in mobile version

any help?