Code to change the layout of the header menu options

Apologies if this has been covered before. I am new to all of this and have finally finished building my website, however there are a couple of things I am unable to do due to not having any coding knowledge. I am using version 7.1 and the set templates don't allow me to do the following:

1. On the mobile version, I would like the Book Now button to be displayed at the top next to the logo, however it is only displaying at the bottom of the navigation page.

2. On the desktop view, the header is not spaced out properly and it's all a bit mixed up. Ideally I would like a side navigation menu, but if this is not possible I would like to be able to space it out evenly. Each folder has pages so a drop down option comes up and it just looks very squashed at the moment.

3. On the desk top view, the book now button doesn't stand out - I would like to make this bold and bigger so it's eye-catching.

I have attached photos to show what I mean.

Is anyone able to help at all please?

Thank you in advanced 😀

Thank you so much!  I have managed to now sort point 3. And I'm taking a look at your links of the other issues.

Website: www.la-rochelle.co.uk

Password: qwerty12

Great, let me know if any of those solutions work for you and if you need any other help.

I'm still struggling to sort out number 1:

On the mobile version, I would like the Book Now button to be displayed at the top next to the logo, however it is only displaying at the bottom of the navigation page.

Any suggestions please?

If you haven't found the correct code I can give that to you tomorrow. Just reply here if you haven't heard from me.

Ah thank you - really appreciate it!

On the desktop version Im struggling to centre the logo - its off set a bit to the left - can't figure out how to sort it 

Try this Custom CSS

// menu item position
.header-menu-nav-item {
  padding-left:6vw;
}
.header-menu-nav-item a {
    margin-left: 5vw;
}
.header-menu-actions {
  margin-left:6vw;
}
// menu order
.header-menu-cta {
  order:1;
}
.header-menu-nav-folder-content {
  order:2;
}
.header-menu-actions {
  order:3;
}

I love the change to the slide out mobile menu on desktop, really smart looking.

Brilliant - that has worked - thank you!

The Book Now on the mobile version is perfect. The only thing is that the BooK Now button on the desktop version is showing twice - on the header and the menu. I only need it to show on the header. Is there any chance of changing the code so that it only shows in the mobile menu and not on the desktop menu? 

I really appreciate your help!

On 9/21/2023 at 7:13 PM, RochSA said:

Brilliant - that has worked - thank you!

The Book Now on the mobile version is perfect. The only thing is that the BooK Now button on the desktop version is showing twice - on the header and the menu. I only need it to show on the header. Is there any chance of changing the code so that it only shows in the mobile menu and not on the desktop menu? 

 

I really appreciate your help!

To hide button on Overlay Menu on Desktop, you can use this CSS

@media screen and (min-width:992px) {
.header-menu-cta {
    display: none !important;
}
}

Thank you - that worked! 🙂 

Any chance you have any code I could use to centre my Logo on the desktop version please? It's off to the left and looks odd.

On 9/23/2023 at 11:51 PM, RochSA said:

Thank you - that worked! 🙂 

Any chance you have any code I could use to centre my Logo on the desktop version please? It's off to the left and looks odd.

Use this CSS code

@media screen and (min-width: 992px) {
.header-burger {
    position: static !important; 
    order: 1;
    width: 33%;
    justify-content: flex-start
}

.header-title-nav-wrapper {
    order: 2;
    flex-basis: 33%;
}

.header-layout-branding-center .header-actions {
    order: 3;
}}

Amazing - that has worked!! Thank you so much! 🙂