View Replies (6)

Resolved MegaMenu / Top Search Div Order Question

  1. Floox
  2. Monday, 25 May 2020
I'm hoping someone can help me find which php file loads the 'floox-top-search' and 'sp-megamenu-wrapper' divs/functionality. I'd like to switch the order so that the menu div is before the search div as the current order fails when testing accessibility standards. I've attached a screenshot highlighting the two divs.
Attachments (2)
Screen Shot 2020-05-25 at 2.33.33 PM.jpg Screen Shot 2020-05-25 at 2.33.33 PM.jpg
Screen Shot 2020-05-25 at 1.57.36 PM.jpg Screen Shot 2020-05-25 at 1.57.36 PM.jpg
Accepted Answer
There is no file in which you can change the order as you want. It's just the "Menu" module position in which is placed search module and rendered menu from template. Search module is the only one module in this position, so it is not possible to change the order through a php file. Before placing search module his div does not exist in any file. It is placed dynamically.

In this case, the only option to place search module in a separate column after menu column. And to finalize the layout through css.
  1. more than a month ago
  2. Floox
  3. # Permalink
Responses (6)
Hi there,

Thanks for contacting us. The module is overridden inside the

templates/your_template/html/mod_search/topsearch.php
https://prnt.sc/soy0jk

Besides, From Joomla administrator area > Module manager > search module has a CSS class
class name 


sp-module  pull-right floox-top-search


And added some javascript code inside the main.css file
templates/shaper_floox/js/main.js
https://prnt.sc/soy1pr

-Thanks
  1. more than a month ago
  2. Floox
  3. # 1
I'm hoping someone can help me find which php file loads the 'floox-top-search' and 'sp-megamenu-wrapper' divs/functionality. I'd like to switch the order so that the menu div is before the search div as the current order fails when testing accessibility standards. I've attached a screenshot highlighting the two divs.

Very simple solution, only css and nothing more:


#sp-menu > .sp-column {

	display: flex;

	justify-content: flex-end;

}

1.jpg
Attachments (1)
1.jpg 1.jpg
  1. more than a month ago
  2. Floox
  3. # 2
Hi Toufiq,

Thanks for your reply, but I'm not sure I follow ... what I'm hoping to do is switch the order (based on the first screenshot I added) from:

<div class="sp-module pull-right floox-top-search"><div class="sp-module-content">...</div>
<div class="sp-megamenu-wrapper">...</div>

to:

<div class="sp-megamenu-wrapper">...</div>
<div class="sp-module pull-right floox-top-search"><div class="sp-module-content">...</div>

So essentially the menu div would before the search div.
  1. more than a month ago
  2. Floox
  3. # 3
I'm hoping someone can help me find which php file loads the 'floox-top-search' and 'sp-megamenu-wrapper' divs/functionality. I'd like to switch the order so that the menu div is before the search div as the current order fails when testing accessibility standards. I've attached a screenshot highlighting the two divs.

Very simple solution, only css and nothing more:


#sp-menu > .sp-column {

	display: flex;

	justify-content: flex-end;

}

[attachment]1.jpg[/attachment]


Thanks Pavel for your input, but I'm looking to switch the order of the divs so when those viewing/navigating the page with accessibility tools the focus shifts from logo to menu when they tab ... currently because the search div is before the menu div (even though visually it's after the menu), the tab order jumps the navigation which can confuse the user.
  1. more than a month ago
  2. Floox
  3. # 4
Good thinking Pavel, I agree that the best approach would be going the separate column route.

Thanks for your help.
  1. more than a month ago
  2. Floox
  3. # 5


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.

Please publish modules in sidebar position.