Hi all,
Right now the natural place of the search module is on the left side in cassiopeia. Is their a way to place the search module to the right side of a website header, no matter what position it is in the header. Right now i have the search module in the "menu position" in the header. Even if I switch the top menu and with the search menu, the search menu tends to move left. I would like to see it stay to the right in the header.
Note after the switch I get the top module then the search module (which shifted left). I try to show with a pic.
Labels |
Added:
No Code Attached Yet
|
Please use the forum for support
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-07-29 12:25:52 |
Closed_By | ⇒ | chmst |
Thank you. I have been to the joomla support forum, if I was getting the answers I wanted from there, I would not be here. I thought I take the chance and find some answers to some of my questions. It was worth a shot.
Maybe you could direct me to the people who are working on the design of the cassiopeia in github so I could ask my questions?
Hi Rich,
Did not ignore you question. I placed the search module in the below-top-bar position, the menu position and the "search" position. However, my question is that the search module is set to the left, I would like it set to the right. It not the position in the header, its getting the search module to to to the right. It probably could be done with css code but, that is the rub. I been using my web developer tools, trying to do [.container-header .container-search] followed by flex code but it is still not working. I will show you a pics.
Here is some code, I have been fooling around with:
.container-search .mod-finder {
display: flex;
flex-direction: column;
justify-content: right;
align-items: right;
}
.container-header .container-search {
display: flex;
flex-direction: column;
justify-content: right;
align-items: right;
}
did not work.
I even have this question in the forum and got one answer back:
"Have you tried a Module Class Suffix of " float-end"?
https://getbootstrap.com/docs/5.1/utilities/float/"
did not work.
I hope this helps.
Look I know I should brush up on my .css, but right now I am in the middle of transferring data from my live site to my testsite "by hand" in order to bring my test site online when joomla 3.x end of service runs out in August of 2023. In my first attempt of going form joomla 3.x to joomla 4.x, I ran into problems with the upgrade, that is I was getting errors after the upgrade. I was told by my hosting service, to install a clean version of joomla 4.x on a test site and the transfer the data over. I asked my hosting company, how could I transfer my old data to the new joomla 4.x webiste, they said they could do it for me, but when they gave me a price, I could not afford it, hence I am doing it manually.
Now I am a small potatoes enterprise, what will happen when a large company has make the move for joomla 3.x to joomla 4.x.
Will they be willing to pay the hosting company the money to transfer their data? or will they be looking for another cms type of system to work with. And I am not the only one who is going to have questions, but again they will find their answers in the joomla forum.
What I should be doing is brushing up on my .css code and not having to worrying on my data transfer. So in the middle of my busy work, if I can find answers to my questions from different sources, I will do it or at least try to.
Lastly, I hope my diatribe did not offend anyone, because I really into my website and really into joomla. Thank you.
Your problem is because you have such a long menu wrapping on to the second line.
If you remove some of the menu items (even temporarily) you will see that the search is to the right of the menu. (thats why your code didnt work).
By default it works perfectly as shown below. This is my last comment as github is not for support.
I even have this question in the forum and got one answer back:
"Have you tried a Module Class Suffix of " float-end"?
https://getbootstrap.com/docs/5.1/utilities/float/"
did not work.
The answer "float-end" in module_class is correct. And you neet the chrome "html5" to get it to work.
chmst,
Tried it, did not work.
R.A.
Hi all,
Sorry to be a pain, but Brian Teeman was right if I have menu wrapping in my header, which I have, the justify-content: end or float-end will not work for the search module going right. Thank you all.
R.A.
Sorry to be a pain, but Brian Teeman was right if I have menu wrapping in my header, which I have, the justify-content: end or float-end will not work for the search module going right.
@rambro i don’t get your comment. Does it work now (because Brian was right)? Or does it not work? Your comment is ambiguous.
Hi Rich,
It doesn't work, because I am using wrapping in the header. I need the wrapping function, more than having my search module shift right.
R.A.
There is a module position „Search“ in Cassiopeia. Why don’t you use that instead of the „Menu“ position?