Header Slider - Proposed Changes

Hello Support,

I appreciate all you do in supporting my website development challenges!

Speaking of which, I am seeking to customize my header slider area a bit.

I attached a before and after look to make sense of it all.

Proposed Changes to Home Page Only:

  1. Hide Site Title

  2. Hide Site Description

  3. Have Menu Along Top Edge

  4. Hide Slider Title and Subtitle

  5. Increase Text Size of Slider Button

  6. Adjust positioning of Slider Button

  7. Have Slider Button Open a LightBox Video

  8. Don’t Have Stick Menu on Home Page, Yet Still Have Sticky Menu on All Other Pages

Will you please let me know if and how I can do this?

Thanks much, Bo

Hi,

Thank you for contacting us.

Which slider type did you enable on your homepage? Can you share a link to your homepage, so I can inspect and get the exact solution to suggest?

Regards,
Kharis
aThemes Support

Hi Kharis.

Full screen slider.

Thanks much for your help! ~ Bo

Hi Bo,

Thank you for sharing the link.

Try adding this CSS code to your website’s Additional CSS.

    .home .site-header .container {
    	 width: 100%;
    }
     .home .site-title, .home .text-slider, .home .site-description {
    	 display: none;
    }
     .home .site-header, .home .site-header.fixed {
    	 position: static !important;
    }
     .home .header-slider .slide-inner {
    	 top: auto;
    	 bottom: 0;
    	 min-height: 120px;
    }
     .home .header-slider .roll-button {
    	 font-size: 18px;
    }

To enable lightbox video on the button, you can use this plugin.

Regards,
Kharis
aThemes Support

Very nice, Kharis! Thanks much.

A few tweaks, and will be good to go.

  1. The Menu is above the picture. Is it possible to have it in the picture? This is preferred.

If not possible, above will work, though the header menu background is set to brown (#823800), yet it’s showing up as white. Will you please provide CSS so I am able to specify the color?

  1. Can the positioning of the Slider button always be in the center (vertically and horizontally) of the slider photo in the desktop, tablet and mobile views?

  2. I have the slider text in the code you provided set to 33px, which look great on desktop. Though it remains 33px for the tablet and mobile views, which is too big. Will you please provide CSS so I am able to specify the px size for each?

This is really turning out nice. I really appreciate your help.

~ Bo

I forgot to attach the screen shot of my current views, to cross-reference my tweaks with the views. Thanks.

Hello Kharis, support. Waiting on your response. Thanks! Bo

Hi Bo,

I am sorry for the delay for I was stuck it draft. Let’s address this one first.

What do you mean by ‘have it in the picture’? Can you provide a raw mockup to help me getting clearer picture?

To change the menu bar background color, you’ll need to add this CSS code:

    .home .site-header, .home .site-header.fixed {
      background-color: #823800;
    }

When you add it, you’ll need to also change the menu link color to white with this code:

    .home #mainnav ul.menu > li > a {
      color: #fff;
    }

.home selector presents in there, so the code will only affect on homepage only. Let me know whether you want to have similar changes on inner pages.

Try this CSS code:

    .home .header-slider .slide-inner {
      top: auto;
      bottom: 50%;
      min-height: 50px;
      -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
           -o-transform: translateY(-50%);
              transform: translateY(-50%);
    }

Duplicate the code, add specific changes, and wrap it with CSS media query. For example:

    @media only screen and (max-width: 991px) {
        /* Your code goes here */
    }

I hope this rely helps. And let me know if I missed something.

Have a nice day!

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks so much!

I’m sorry if feeling like I was pushing you. Not my intention. You guys are always so responsive, that I thought my message may have been lost in the shuffle.

In your response, will you please include your virtual tip-jar link, as I’d like to send some cash your way for all of your help?!

  1. Attached is a mockup of what I mean by having the menu in the picture.

  2. Is it possible to have separate codes for desktop, tablet, phone regarding the placement of the slider button? The code you supplied looks great on desktop (I had to adjust to 42%), but not appearing the same way on the tablet and phone views. Seems like using the same code for all three may be a challenge. I’m not sure.

  3. When I enter the ‘@media only screen and (max-width: 991px) {’ coding, the slider text reappears. When when I take it back out, the slider text is hidden again, which is what I want, as the text is on the slider graphic.

Thanks again, Kharis. Much appreciated. Bo

Hi Bo,

Thank you for getting back.

Let’s address them one by one. To make us easier track each progress.

  1. Attached is a mockup of what I mean by having the menu in the picture.

Try adding this CSS code to your website’s Additional CSS.

    #mainnav ul.menu > li > a {
      color: #fff;
    }

    @media only screen and (min-width: 1025px) {
      .home .site-header, 
      .home .site-header.fixed {
        position: fixed !important;
        background-color: transparent !important;
      }
    }

Let me know whether it works for you or not.

Regards,
Kharis
aThemes Support

Works great, Kharis!

One further request now that I see it…

Can we make it so the menu color is white (#ffffff) on the home page only, and orange (#823900) on the subpages?

    #mainnav ul.menu > li > a {
      color: #fff;
    }

Try replacing these lines to

    .home #mainnav ul.menu > li > a {
      color: #fff;
    }

Regards,
Kharis
aThemes Support

Works great, Kharis! First one completed!

One more tweak needed. The home page site title and description are hidden on the home page, which your code does.

Though, when I upload a Site logo, the logo appears on the home page.

Can the logo be hidden too, just on the home page?

Thanks!