Pro header hero -- help please :)

Support
#1

few things I can’t figure out:

  1. top bar -> has an image (on the left) and menu (on the right)

how can I:
a) make the background color do a gradient fill?
b) have the background color bar be small WITHOUT changing the size of the image on the left side

  1. bottom bar -> has a slider for me…

how can I:
a) make the whole bar not so tall? as in I have 100 pixels of bottom space I need to get rid of…
without changing other sizing things… i just need to bottom space to be removed

thanks

#2

Hello There,

Thanks for writing in!

1.) You will need to create a bar and add two containers. The first one will be for the left and the second one will be for the right.

  • a.) The background color gradient fill is only possible with custom css. You will need to add a custom ID or custom class first added into the bar and then you can use it along with the custom css. You may check out this color gradient generator site here: http://www.cssportal.com/css-gradient-generator/

  • b.) You will have set the height of the bar. By default it is set to 6em. Reducing the height would make the bar size a lot more smaller.

2.) Create your bottom, add a container and insert a text element or content area. You can then use a revolution slider shortcode to display your slider.

  • a.) The height of the bottom bar may depend on the height you havet set up for the bar. It would be good if you can provide us the url of the page in question so that we can have a closer look.

Hope this helps. Please let us know how it goes.

#3

thanks… i added a secure note above :slight_smile:

#4

Hi there,

Adding opacity to gradient colors is possible but not on some browser, like IE that uses solid colors. Example, in your gradient CSS, you can change the color to rgba like rgba ( 255, 255, 255, 0.5), it’s color white with 50% opacity.

And yes, the logo looks good.

About your other questions, the height is configurable under DIMENSIONS section when you inspect your footer/header bar.

About the paper spacing, it’s the padding. Please add this CSS with your preferred padding

.entry-wrap {
    padding-bottom: 20px;
}

What about the top bar and slider border? You mean border radius or fade in?

Hope this helps :slight_smile:

#5

thanks… for the help :slight_smile:

I needed to change entry wrap to this

.x-bar-container {
padding-bottom: 10px!important;
}

thanks!

#6

Glad to hear we managed to help and you got it sorted! :slight_smile:

#7

Is there something I’m missing when dealing with the logo size issue? :slight_smile:

if you look at the site on desktop – its great.
if you look on cell phone, the logo is huge.

so if I use scaling option, its only as big as the bar, where I can’t make logo bigger unless the bar is bigger.
is there a way around that? meaning, have the logo scale, but start out bigger than the bar height?

currently not using scaling.

thanks

#8

Hey There,

Thanks for updating in! You can use standard and with a custom css. In the custom css, this is where you set a custom width for desktop and for smaller screens. For example:

And insert this:
$el.x-image {
width: 180px;
}

@media(max-width: 979px) {
$el.x-image {
width: 130px;
}
}


Hope this helps.
#9

This was done prior to 2.1 and now after the update… .I can’t find it?
where did it go :slight_smile:

#10

fyi. i found it. I was confused there were 2 areas for global css

Theme Options -> Global CSS (is what I should be using)

:slight_smile:

#11

Yes, that is it. :slight_smile:

#12

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