Hi John

Have you tried converting your hornav menu to a module position (Template style settings -> General -> Menus) and adding both a menu module and search module to the hornav position?

Ciaran

Good Morning Ciaran,

I did try that. The search-bar is positioned to the right and also above the menubar.

Here is how it looks:

https://www.mountpleasantlibrary.org/hayleyj4/index.php/mppl-menu/beta

John

Sorry. To the left ...

Hi John

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.hornav {

    display: flex;

    flex-direction: row;

}

.hornav * {

    width: auto;

}

Ciaran

That got the search-bar in the horizontal menu - thanks!

https://www.mountpleasantlibrary.org/hayleyj4/index.php/mppl-menu/beta

Is it possible to add one more line to move it from left to right?

The search-box is a Custom module

John

Hi John

To amend you can also add the following...

.hornav .menu {

    order: -1;

}

Ciaran

Thank you!

Ciaran

I've come across a slight quirk and am wondering if there is an easy fix.

I might want to hide the search-bar on phones and run a separate module.

When I put in the code to hide it - d-none d-sm-block - it did not work when the module was set in the hornav location. When I moved the module to a different location - top-1a - it did work and the module was not visible on a phone.

Any ideas please?

John

Hi John

Would you have a URL to an example of your module in the hornav location?

Ciaran

Here it is Ciaran

http://www.mountpleasantlibrary.org/hayleyj4/index.php/mppl-menu/beta

While you are looking at that, also wondering if there is a way to control how much of the viewport the imageslider module takes up. Ideally we would like it to be big enough to have an effect, but not so big that it takes up the entire screen.

Thanks
John

Hi Ciaran

Have you had a chance to look at this?

If neither is an option it’s not a problem but would be helpful to know

John

Hi John

It seems that the hornav position, as intended for menu modules, does not render the module class. A possible working might be to use the header-2 module position. You can position this over the hornav area with the following custom CSS...

.header_top {

    background-color: transparent;

    position: absolute;

    bottom: 0;

}

For the LayerSlideshow height, does amending the General Settings -> Max Height setting in your module settings give you the desired result?

Ciaran

Great looking site John. Would suggest for accessibility the contrast be improved on your search area.

Thanks Alison. To be honest it is still a work-in-progress and I'm afraid I'm probably not done asking Ciaran questions on that search-bar!

Thanks Ciaran. That makes sense. And yes, we can get where we want to be with the internal Max Height control.

Good luck John and it's looking great.