Want to visible Menu header row only on home page

Support
#1

Hi ,

I have different rows in Menu Header Builder and i want to hide one row showing with content " Start your business in UAE " on all inside pages.

Mean to say i only need this row to be visible on Home page only.

Link http://shop.dezinar.com/

Further when i view my Menu row header under 480px its jumping on center instead of Top, Please suggest me fix.

#2

Hello There,

Thanks for writing in! There are two ways you can resolve the issue.
1.) We can make use of a custom css that will make sure that the section bar will not display in any other pages, only in your homepage. You can add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

body:not(.home) .hm27.x-bar, 
body:not(.home) .hm39.x-bar {
  display: none;
}

2.) You can duplicate this header. Once duplicated, edit the duplicate header and remove the section. This newly duplicated header can be assigned globally. The original header shall be assigned only for your home page.

Please let us know which one works for you.

#3

Hi , Great 1st part is done.

I requested one more thing above in 2nd image for mobile menu, i created this menu and define visibility only on mobile devices but on scroll it jumping in the center.

It works fine when we move all rows of mobile menu on top but then desktop menu is jumping in center.

Please see the backend view

#4

Hello Again,

Thanks for providing the screenshot. This issue is an on going bug in the custom header builder. To resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 480px){
    .hm43.x-bar {
        top: 0 !important;
    }
    
    .hm53.x-bar {
        top: 33px !important;
    }
}

We would loved to know if this has work for you. Thank you.

#5

HI RueNel,

It was fixed before but now after updating x its showing the same, can you check and let me know.

#6

waiting for above.Please suggest me the fix.

#7

Hi again,

Please update the previous code to this:

@media(max-width: 480px){
    .hm44.x-bar {
        top: 0 !important;
    }
    
    .hm54.x-bar {
        top: 34px !important;
    }
}

Let us know how this goes!

#8

great Nabeel, it works perfectly on home page but inside pages still showing the same :frowning:

#9

Hey there,

I checked your inner pages and it’s working fine on my end, try clearing out the cache first and see if this resolves the issue. If the issue persists then please share some screenshots of what you’re seeing so we can take a closer look.

Thanks!

#10

Hi Nabeel,

Yes it works perfectly after clearing the cache. Thanks for your help to fix the issue.

#11

Glad we could help you in fixing the issue.

Cheers!