REQ: Full width Sticky Menu and branding?

Home Forums Esteem Pro REQ: Full width Sticky Menu and branding?

Tagged: 

This topic contains 8 replies, has 2 voices, and was last updated by  Bishal Napit 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1400941

    webdesign3
    Participant

    Is there a way to have the main menu and branding to go FULL width with WHITE background?

    I use the sticky menu or anything plugin with 9999 Zindex and the class:

    .element-is-sticky {
    background: #fff;
    }

    but on scroll i just get a center block thats white and not full width?

    Can you help? cheers, Jon.

    #1400947

    Bishal Napit
    Moderator

    @webdesign3

    Can you provide us the link to your site? If that is possible via the CSS code then, we can provided you with the CSS code for same. Thanks.

    #1400975

    webdesign3
    Participant

    Test website: https://doituk.com/sites/mort/

    Hi, I did work it out in the end myself with using the Sticky plugin and my own CSS

    BUT I wanted to do it then without the plugin and just use my own found CSS and Javascript

    it works…but it isnt perfect on a mobile device with a gap on the right.

    your reply and forum will not allow me to put the code on here to show you??

    what do you suggest?

    Cheers,

    Simon.

    #1401025

    Bishal Napit
    Moderator

    @webdesign3

    Can you once try the below CSS code in the Additional CSS box provided via the Customizer Options and check:-

    #header.inner-wrap {
        width: 100%;
    }

    Thanks.

    #1401093

    webdesign3
    Participant

    I use my own JS file which is:

    I CANT POST THE CONTENTS OF MY JS FILE??! – wordfence stops me.

    and the CSS =

    /* The sticky class is added to the header with JS when it reaches its scroll position */
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
      background: #FAFAFA;
      z-index:99999;
      padding: 0 15%;
      height: 100px;
    }
    
    /* The headlogo img class is added to the logo with JS when it reaches its scroll position */
    
    .headlogo img {
      max-width: 150px;
    }

    which I worked out and is what i want (and shrinks the logo + sticky banner) and this already included width 100%

    now its just too short on mobile….. would you just use an @media to correct?

    Kind regards,

    jon

    #1401097

    Bishal Napit
    Moderator

    @webdesign3

    Can you update the CSS code with the below ones:

    @media (max-width: 1190px) {
      #header.inner-wrap {
        width: 100%;
      }
    }

    Hope this works. And if you want to show the JS code too then, you can post your JS code to: https://pastebin.com/ and provide us the link to that paste.
    Thanks.

    #1401442

    webdesign3
    Participant

    Hi, sorry for delay and thank you for your help. Yes that code worked which i think i did find out in the end…plus the sticky JS works well too which is better than using a plugin!! Plus gives scope to add more 🙂

    I will setup a pastebin account then and post the JS as it may help someone else 🙂

    thanks again,

    Jon

    #1401521

    Bishal Napit
    Moderator

    @webdesign3

    Sure thing, you can do so. And do let us know if you have got any further query regarding to our theme. Thanks.

    #1401929

    webdesign3
    Participant

    Here is a pastebin link to the javascript i used instead of a plugin.

    Sticky Menu and shrink logo

    hope this helps others wishing to do the same.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘REQ: Full width Sticky Menu and branding?’ is closed to new replies.