Header on top of side scrolling

Question

In the pages below I want the header and the menu just beneath it to have its full 100% width, meaning I want the side scrolling to show below the navbar.

In this page: http://raddar.pro/projects_7.html the side scrolling pushed the header and the menu beneath it to the left by its width, therefore it is not what I want. Are you able to help me amend the code please so that the header and the menu remain 100% screen width?

In this page: http://raddar.pro/projects_13.html I have tried "overflow: hidden" for the body and "overflow-y: scroll;" for the content below the header and the menu beneath the header, but it did not work.

In the page below I have managed to introduce a side scrolling which shows below the header and the menu beneath the header: http://raddar.pro/projects_12.html

On this page above I have put my content within the fullpage.js property of scrolling inside sections and slides (https://alvarotrigo.com/fullPage/examples/scrolling.html#firstPage), however then I am not able to operate the content. Namely, the menu beneath the header does not work anymore, i.e. it does not filder the images of the MixItUp content that's placed within the fullpage.js section. In fact, sometimes it works but it is super random and I feel there is some overlap in the code which I am not able to discover (I have a feeling it is a javascript issue). It would be great if you could help me solve this because I actually really like the graphics of the scrolling within a fullpage.js section, which is alike the mobile phone scrolling and not as wide as the standard desktop browser side scrolling.

Below is some progress I made, but still not quite there

Option I: http://raddar.pro/projects_14.html - here I am able to have the scrolling within fullpage.js, however the mixitup plugin doesn't work (ie the menu of mixitup plugin won't filter the images). Below is the code I put together:

     afterRender:  $(function () {
     var filterList = {init: function () {
     // MixItUp plugin
     // http://mixitup.io
     $('#portfoliolist').mixItUp({
     selectors: {
     target: '.portfolio',
     filter: '.filter'
     },
     load: {
     filter: '.architecture, .interiordesign, .urbandesign, .development, 
     .art, .branding, .raddar' // show app tab on first load
     }    
     });
     }
     };
     // Run the show!
     filterList.init();
     }),

Option II: http://raddar.pro/projects_15.html - here mixitup plugin works however there is no scrolling, so i am not able to see all the images. i changed the "$" and "(" at start of the code and ")" at the end of the code:

     afterRender:  function () {
     var filterList = {init: function () {
     // MixItUp plugin
     // http://mixitup.io
     $('#portfoliolist').mixItUp({
     selectors: {
     target: '.portfolio',
     filter: '.filter'
     },
     load: {
     filter: '.architecture, .interiordesign, .urbandesign, .development, 
     .art, .branding, .raddar' // show app tab on first load
     }    
     });
     }
     };
     // Run the show!
     filterList.init();
     },

Header on top of side scrolling

Answers (1)

Related Questions