ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• May 12, 2016 at 3:30 pm #267072
  solidsn2004

  Member

  Post count: 208

  Hi,

  I have enabled sticky header and header resizing from the backend but when I scroll down the page the header barely changes.
  Having worked quite a lot in the Dante theme I find it weird that Atelier doesn’t have more customisation options for header resizing (unless I can’t find it).

  I have used the custom css below in order to resize it the way I want (60px):

  .is-sticky > .sticky-header-resized{
  height:60px !important;
  }
  
  .is-sticky #logo img{
  height: 40px;
  }
  
  .full-center.resized-header #header{
      height: 60px;
  }

  Can you help me position navigation bar and logo inside the resized header?

  Thanks a lot.

  PS. To see the website please use same password as admin credentials.

  May 13, 2016 at 9:14 am #267223
  solidsn2004

  Member

  Post count: 208

  Any ideas guys?

  May 13, 2016 at 10:36 am #267261
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please provide me page password to view it.
  Thanks
  Mohammad

  May 13, 2016 at 10:48 am #267264
  solidsn2004

  Member

  Post count: 208

  Hi Mohammad,

  As I said in my first post password to see page is the same as your login.

  Thanks

  May 13, 2016 at 11:23 am #267274
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use this custom css code:-

  .full-center.resized-header #header, .full-center.resized-header .float-menu, .header-split.resized-header .float-menu {
      height: 80px !important;
  }
  

  Thanks
  Mohammad

  May 13, 2016 at 2:11 pm #267326
  solidsn2004

  Member

  Post count: 208

  Hello Mohammad,

  Thanks for your code but unfortunately its not working…
  As I said I want to keep the height of the resized header to 60px (not 80 as per your code) and center the logo and the navigation menu.

  Any other suggestion?

  Thanks in advance.

  May 16, 2016 at 8:40 am #267641
  solidsn2004

  Member

  Post count: 208

  Any updates on this Mohammad?

  May 16, 2016 at 10:37 am #267672
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Remove the last code and use this new code:-

  .full-center.resized-header #header, .full-center.resized-header .float-menu, .header-split.resized-header .float-menu {
      height: 60px !important;
  }
  .full-center.resized-header #logo, .full-center.resized-header #logo.no-img a {
      height: 60px !important;
  }
  

  Thanks
  Mohammad

  May 16, 2016 at 10:49 am #267676
  solidsn2004

  Member

  Post count: 208

  Almost there,

  As you can see logo is aligned good now but navigation menu stays the same…

  May 16, 2016 at 11:41 am #267696
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Please use also this custom css code:-

  .full-center nav#main-navigation {
      margin-top: -30px !important;
      display: block !important;
      float: right !important;
  }
  

  Thanks
  Mohammad

  May 16, 2016 at 12:31 pm #267723
  solidsn2004

  Member

  Post count: 208

  Now the navigation bar always stays on top when you load the page (-30px). I want it to align in the middle when you scroll down not when you load the page 🙂

  May 16, 2016 at 12:40 pm #267728
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Remove the last code and use this new code.

  .full-center.resized-header nav#main-navigation {
      margin-top: -30px !important;
      display: block !important;
      float: right !important;
  }

  Thanks
  Mohammad

  May 16, 2016 at 12:43 pm #267731
  solidsn2004

  Member

  Post count: 208

  Thanks a lot this worked!

  May 16, 2016 at 4:03 pm #267820
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Glad 🙂 to help you.
  Thanks
  Mohammad

  May 24, 2016 at 6:57 pm #269843
  carlotte

  Member

  Post count: 42

  Hi,

  Same question here,

  Using the given codes above, the logo in sticky header becomes smaller when scrolling down, but the sticky header itself stays very high. How to make it less high (80px)?
  See live site: http://www.mistymountain.nl/

  Ive used the code:

  .is-sticky > .sticky-header-resized{
  height:80px !important;
  }

  .is-sticky #logo.has-img a > img {
  height: 60px;
  }

  .full-center.resized-header #header, .full-center.resized-header .float-menu, .header-split.resized-header .float-menu {
  height: 80px !important;
  }

  .full-center.resized-header #logo, .full-center.resized-header #logo.no-img a {
  height: 60px !important;
  }

• Back to forum

  Posted in: Atelier