Make menu bar fixed when scrolling but with header graphic at top of website

trevorellis

Hello, we are using the Uber template and would like to be able to make our website (http://ulceby3.users62.interdns.co.uk/) have a menu bar and header more like this website (https://lincolncathedral.com/).

Currently, I have fixed the menu bar (.uber-header) at the top of the page so that it is always viewable on screen when you scroll, which is what we want. However, I want to have the header graphic (Header WowSlider in the position acm-topbar) above but when you scroll, we only want the menu bar to stay fixed onscreen. What do I need to do to achieve this?

If it is not possible to have the graphic at the top because it is an WowSlider module, will it work if it is a Joomlart Advanced Custom Module slideshow?

Any assistance would be greatly appreciated.

saguaros

trevorellis
Hi,

The layout of these 2 sites are a little bit different as the header of https://lincolncathedral.com site shows the topbar block before the big image and the menu.

While your site has the slider before the header menu, you can customize the style of the header like making it transparent and some style for text color / border / etc...

Regards

trevorellis

saguaros Hello, thank you for your help. We have solved the problem with the following code:

.uber-header {
  position: sticky !important;
}