Pro header with slider 'positioning / layout' help

hello,

I’m having trouble getting the rev slider (based on hero template) to display correctly.

on desktop… looks mostly good, BUT what is controlling the whole header to be cut off at certain height?

also, when resizing to be small (like cell phone)… the top of slider goes behind the top bar?

where/what options to prevent those 2 items?
THANKS

note: I see “absolute vs relative” positioning has effects,
but it seems like you fix one issue, but create another?

ultimately, I have:

  1. top menu in top bar
  2. in 2nd bar, have background image and slider

trying to keep top menu at top, image centered and absolute, slider centered as well.

but issues are slider goes under menu or background image changes sizes/goes up to high

thanks

Hi there,

The height of the header is 6em in which you can change in your header builder. What do you intend to do with a slider and top menu? Do you wish to stack them together? In that case, you should set them both to the relative. But if you still wish to use absolute, then you can simply change the Margin Top option of your second header bar to 96px ( 6em ). Equivalent to the height of the first header bar.

Thanks!

thanks…

okay, it looks like I need relative (because absolute creates the scroll bar)…

  1. so if you like at the link I sent in secure post, the home page on stage…
    and make the browser window smaller… you will see the slider and background image in bar 2 go ‘under’
    bar 1.

how to prevent that from happening?

  1. also, as you make the browser window smaller, the bottom of bar 2 gets cut off? how to prevent the background image from getting cut off (or rather)… the space for bar 2 is getting limited?

not sure what is happening, but the bottom of the background image is blurred/opacity is lighten, so there is know ‘hard line’ on the background image. EXCEPT you see it when the browser window is smaller.

thanks!

:slight_smile: we are getting there!

Hi,

You can try adding this in Header > CSS


@media(max-width:767px) {
hm1.x-bar.x-bar-absolute {
       position: relative;
}
hm7.x-bar .x-bg-layer-upper-image {
        background-size: cover;
}
}

Hope that helps

that CSS helped some?

so having trouble getting the parts to stay in relation/placement when using different devices??
Things change/flip-flop when you look at:

  • desktop browser (full screen)
  • desktop browser (drag smaller screen)
  • look at mobile phone vertical layout
  • look at mobile phone horizontal layout

parts I’m concerned/talking about:

  1. top bar1 (containing the logo/menu). do not let background from bar2 go under logo (or maybe only a little)
  2. bar 2 slider should not start above background image on bar2. keep it 20-30 pixel below top of background

Isn’t there a way to accomplish both items above on any device?
If I fix one, the other breaks and vice-versa :frowning:

above in the 1st comment, I have the login – its stage site, so you can’t hurt anything :slight_smile:
the home has the header.

thanks!

Hi there,

Unfortunately, we can not go and fix things for you in the backend but we can give you proper suggestions to do it yourself.

You need to make sure that Bar 1 is set to be relative and does not have any minus margins. The same thing should be for the Bar 2.

Now you need to follow the steps mentioned below to make the whole slider responsive from inside the Revolution Slider and not the header builder:

https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/

The other point is that you can always use the hide during the breakpoint option of the header builder to Hide/Show Bars or containers to have completely different margins and paddings:

Thank you.

thanks! I will go see/figure out what i’m missing/doing wrong :slight_smile: based on your post :slight_smile:

question: this statement:
"… The X and Pro themes are responsive out of the box, that means the auto-generated codes and styles will sit beautifully on mobile, tablet, laptop and desktop devices… "

so, if i use default elements, things, etc. and I see that the results are not “beautiful on all devices”, does that mean I must have changed something? meaning, by default everything is beautiful on all devices???

thanks

PS. appreciate the tip/reminder on hide on break points :slight_smile:

awesome… i see only one issue now (after making some changes)

and that was changed by tweaking the background image itself :slight_smile:

thanks!

PS.
do you know of a resource that I can learn what/where/how all the “options” in the header do?

example: some options fields are text fields, were you type in something.
a) something that list the options
b) something that SHOWS what the value does

I really wish there was a “visual guide” that was done for every option :slight_smile:

Hi,

Kindly refer to the link below

You can also check some third party sites like

https://xthemeusers.com/tutorials/

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.