Menu alignment - Forum | JoomShaper
Solved Helix Framework

Menu alignment

Asked by miguelon7 4 years ago Last activity 4 years ago

Dear Helix Support,

On my website, smartradfahren.de, there is a German and an English version. Neither of them makes me happy how the menu is aligned.

German Version:

  • THe logo should be all the way to the left
  • The language selector should be all the way to the right

English Version:

  • The menu should be centerfed, eg the space on the left (from Home) should be equal to the space on the right (of Blog)

To better understand the system, it would be great if you could tell me why the two versions are different in the first place (as far as I can tell I have set everything in Helix the same for both for the menu)

And of course how to solve it. The minimum I would like to know is how I can move the logo to the left and the language selector to the right.

Thank you very much!

Best regards,
bjorn

Accepted answer

Marked as the solution
Pavel
4 years ago · edited

Hi. As far as I see you use your own Header. Therefore, you do not need the code provided by Rashida. Just, in the Layout Builder settings switch the Header to Fluid Row mod.

Additionally (look at screenshot):

  1. Delete this code where you added it. These fields are intended only for class name but not for code. Read Helix documentation about right places to edding your custom code.
  2. I would not recommend using Left / Right positions in Header. Since they are used in the template for sidebars and has predefined css styling like borders, paddings and margins. Better use any not involved position. For example, User 1.

7 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
4 years ago

You can make your header container fulwidth, then your logo and right element will be on two different edge. Here is the code you need to put in your custom CSS:

#sp-header .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 100%;
}

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

miguelon7 Asked this
4 years ago

Thanks Pavel,

I fixed the fluid part and changed to User1. I cannot find the file where I added the code (I vaguely remember this was from when I started a year ago - bad rookie mistake to not note down what I had changed...). I don't even know the file name. I downloaded entire joomla dir from the server and ran a local search on it, but did not find it there.

Not sure if you drop a hint which filename it is or even the folder?

But thanks already for the hint about fluid!

Best regards,
bjorn

miguelon7 Asked this
4 years ago

Hi Pavel,

I sort of found my way around code inspector (MS Edge). I do see the two lines in the Elements sections. Still haven't figured out how to match it to the file names under "Form Templates" (or whatever it is called in English).

I have commented out the two lines in code inspector, but I assume this is only temporary for the sesson.Well, but that's not your job. Will try to find more docu, a tutorial, or a class on the code inspector.

Thanks again for your help.

Best regards,
bjorn

Pavel
4 years ago · edited

Hi.

1 is located: Template settings > Layout > Header section settings > Custom CSS Class field

2 is located: Template settings > Layout > in Main Body section Component column settings >Custom CSS Class field

miguelon7 Asked this
4 years ago

Thanks a lot Pavel!

At lest the first one was right in front of my eyes and I didn't see. For some reason my memory was that I had changed a css file directly (it still should be ina css file somewhere and I am not sure why I couldn't find it after downloading everthing under joomla folder)

Thanks again for your great support!!

All the best,
bjorn

Log in to reply.