Menu Aligned Left, Burger Menu Aligned Right - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Menu Aligned Left, Burger Menu Aligned Right

M

MitchNorth

Template 2 years ago

Is it possible to have the main text menu aligned to the left of a template, but then have the burger menu be aligned to the right in mobile view?

0
9 Answers
M
MitchNorth
Accepted Answer
2 years ago #100880

I understand Paul.

Thank you for your reponse.

For anyone else who sees this thread, I changed the max-width to 991px to cover tablet view as well.

@media screen and (max-width: 991px) {

sp-menu > .justify-content-end {justify-content: flex-end !important;}

}

Thanks again Paul.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #100155

Hi,

yes, possible. But probably with small help of custom CSS.

0
M
MitchNorth
Accepted Answer
2 years ago #100157

Here is the url you are requesting Paul.

Maybe this is something that could be added to the Customization Tips in the Documentation for Helix Ultimate 2.

0
M
MitchNorth
Accepted Answer
2 years ago #100566

I provided the url when you asked for it Paul. What CSS code would I use to leave the desktop menu aligned left and make the mobile burger menu appear on the right?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #100842

Below custom CSS should help to move [=] to the right size (on mobile view only):

@media screen and (max-width: 680px) {
#sp-menu > .justify-content-end {justify-content: flex-end !important;}
}

info_2_2023.gif

0
M
MitchNorth
Accepted Answer
2 years ago #100881

I don't know why the text above became so big, but wow. :)

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #100914

For sure it's good to know the basics. As I see above header and menu you have image, so this is not a text.

<img src="/images/banners/Northern_Healthy_Homes_Logo_2023.png" alt="..." style="display: block; margin: 0px auto;" width="1000" height="140">

width and height settings do the job. If I understood your question/concerns correctly.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #100917

For anyone else who sees this thread, I changed the max-width to 991px to cover tablet view as well.

Indeed, but not only small tablet but also XL smartphone in horizontal view.

Becuase tablet iPad has 1024px.

0
M
MitchNorth
Accepted Answer
2 years ago #110478

See below.

0