Menu Alignment
miguelon7
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
Pavel
Accepted AnswerHi. 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):
- 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.
- 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.
Rashida Rahman
Accepted AnswerHi there!
The following doc may help you with your menu alignment issue:
Best Regards
Rashida Rahman
Accepted AnswerYou 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
Accepted AnswerThanks 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
Accepted AnswerHi 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
Accepted AnswerHi.
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
Accepted AnswerThanks 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