Make header menu hover over slider

Support
#1

I am working on this site using this reference layout from my designer:

[Album] Imgur

Site: http://jazzforallages.com

Right now I have two objectives I can’t search my way through with X Theme.

1.) Move slider up so ribbon menu overlaps the slider

2.) Add the full length black stripe image behind the purchase tickets images

I am still working on other aspects but these two i could use a hint on.

Thanks

#2

Hi There,

Thanks for writing in!

-1. Please add this css to your Theme Option -> Global CSS

 .x-navbar {
   background-color: none !important;
 }
.x-slider-container {
 margin-top: -20px;
}

-2. Please use fullwidth no container template for the page and make the section background black and image.
Section should be Full width, Make the section three column and adjust margin top and bottom to make the image overlap.

Hope this helps!

Thanks

#3

Hi,

  1. You can add this in Theme Options > CSS 
.x-navbar {
       background-color: transparent !important;
}

.x-slider-container.below {
    margin-top: -20px;
}
  1. You need to remove this code
.site, .x-site {
    width: 90%;
    max-width: 964px;
}

Then add the black stripe image as background of your section.

  1. If you want to constrain the width of your slider, you can add max width under slide layout.

Hope that helps.

#4

Great suggestions, I am going to test tonight and report back.

#5

Sure, do let us know how this goes!

#10

Here are my remaining tasks: Please assist in any way while I hack away over here:

  • Footer widget container needs centering and reduction to closer align with the image
  • Header navbar links “taller” than actual text, extended into header logo.
  • Header bar/logo should link to site home
  • Footer bar/logo should link to external site
  • Header not boxed in on mobile view
  • remove background black bar in mobile

I’ve removed anything I fixed while waiting for a reply. I’ve spent some time researching and hacking away using firefox console and forum posts but these items have eluded me 100%. I know some of these things could be considered custom development, pelase cherry pick anything you can help with.

#11

The top footer has a 5% top and bottom padding by design. You can modify it by add this CSS and edit the values. Try 6%

.x-colophon.top {
    padding: 6% 0 5.25%;
}

Change your custom CSS from

.x-navbar .desktop .x-nav > li > a {
    height: 147px;
    padding-top: 142px;
}

to this

.x-navbar .desktop .x-nav > li > a {
    height: 6px;
    margin-top: 139px;
}

These customizations would be quite involved. I’d recommend you upgrade to Pro so you can build a custom header.

I don’t see a black bar in mobile. Can you give us a screenshot?

Thanks.

#12

I am facing a new issue. I have updated to the latest version but now the mobile navbar moves awkwardly and has a transparent background now. The transparency is set by the other css below.

It seems to be related to this css

.x-navbar-inner {
background: url(http://www.jazzforallages.com/wp-content/uploads/header2.png) no-repeat center center;
padding-bottom: 20px;
width: contain;
}

.x-navbar {
background-color: transparent !important;
}

Which up until the update worked fine.

I know “The pro version has custom headers” but up until the pro version existed this method worked great.

I am working on the other topics but this has taken priority.

#13

Hi there,

It looks the same as your first screenshot, would you mind providing another screenshot of what you’re currently seeing? Please don’t forget to clear your site’s cache after any updates. It may cause styling issues.

Thanks!

#14

The above isn’t custom CSS, the 147 is set by the Navbar Top Height in the Customizer.
See https://imgur.com/a/vFlqR for the current issue, I am not sure how to change the links to be over the menu only.

here is the current issue with mobile. The header image also doesn’t constrain to the mobile size.

[Album] Imgur

#15

Hi,

  1. Please set Navbar Top Height to 45px then add this code in Theme Options > CSS 
.x-navbar .desktop .x-nav {    
    margin-top: 130px;
}
  1. To fix mobile menu, you can add this in Theme Options > CSS 
@media(max-width:979px) {
.x-navbar-inner {
   background-position: top center;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu li > a, .x-navbar .mobile .x-nav li a {
    color: rgb(144,179,192);
}

.x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
    color: #000;
}
}

Hope that helps.

#16

1.) Menu still is higher than physical menu, please advise further

2.) Worked great, thanks!

Appreciate the help, getting closer. :slight_smile:

#17

Hello There,

  1. It happens because of how you have set it up. You have added that logo/image as background image of the container of the menu link. By default, this background image height will depend on the height of it’s content. We need to override default padding with margin. Try this instead:
.x-navbar-inner {
    min-height: 176px !important;
}
.x-navbar .desktop .x-nav > li > a {
    height: auto !important;
    padding-top: 0 !important;
    margin-top: 152px !important;
}

See this: https://screencast-o-matic.com/watch/cFeUndDpVX

Hope this helps.

#18

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