Navigation dropdown and sub navigation spacing

Hello AThemes team,

I have 2 questions.

  1. The navigation on my site, at breakpoint 1024, responds to the hamburger icon. When clicking on the navigation icon, the dropdown appears. I would like to know how to make the dropdown be 100% width, as it does on mobile.

  2. At the very bottom on every page, you can see the Navigation on the right hand side. I have created 2 sub. navigation links and now the second sub. nav I created sits to low. I would like to have the space between Behind the Scenes and Do you prefer reading? be the same distance between the Our Approach and Do you prefer reading? I do see in the code that the Navigation at bottom is “inherited” from the top sub navigation, so I don’t want to mess up the top sub. navigations.

Assistance would be very appreciated on this.

Thanks,
Esteban

Hi,

Please post a link t your website, so we can check if that can be achieved.

Best Regards,
Csaba

Sorry about that. Link is : http://creativew.com/theme

Dear Esteban,

Try to apply the following CSS code:


@media only screen and (min-width:768px) and (max-width:1024px){
  
  .header-wrap .container{
    width: 100% !important;
    padding: 0 !important;
  }    
  
  .header-wrap{
    position: relative;
  }
  
  .header-wrap .col-md-4{
    z-index: 2;
  }
  
  .header-wrap .col-md-8{
   position: absolute;
   top: 0;
   right: 0;
   z-index: 10;
  }  
  
  .header-wrap .col-md-4,
  .header-wrap .col-md-8{
    width: 100% !important;
  }
  
  .header-wrap .col-md-4 > a{
    margin-left: 44px;
  }  
  
  .btn-menu{
    margin-right: 44px;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Hi Kharis.

This works relatively well on desktops, but now my iPad has a white border on the right hand side when the site loads, Please see screen shot link: http://creativew.com/access/sydney/3.png

Any idea how to fix this please?

Thank you,
Esteban

Kharis,

Actually you can also see this on the desktop if you push the site to the left. Please see link for desktop screenshot: http://creativew.com/access/sydney/4.png

Any help would be very appreciated.
Thanks.

Here is another screenshot that might help understand this better: http://creativew.com/access/sydney/5.png

Hello there,

Try to apply the following CSS code:

html,
body{
  overflow-x: hidden;
}

Regards,
Kharis

Perfect! Thanks so much Kharis.

Topic Resolved.