How can I fix the navigation bar?

• 

  patriciaundbeni · Member · Sep 12, 2016 at 12:48 pm

  • Copy link
  • Add topic to favorites

  I would like to have a fixed navigation bar when scrolling down the pages at http://www.activestudiofame.wordpress.com

  It should be similar like http://www.fayo.de or like the https://piquedemo.wordpress.com.

  is this possible to adjust with css codes?

  thanks for your help

• 

  hallluke · Member · Sep 12, 2016 at 2:23 pm

  • Copy link

  You can pin it to the top of the device screen permanently with the following code:

  #site-navigation {
    position: fixed;
    top: 0;
    width: calc(95.339% - 110px);
    z-index: 30;
  }
  
  @media screen and (min-width: 1180px) {
    #site-navigation {
      width: 1070px;
    }
  }
  
  @media screen and (max-width: 767px) {
    #site-navigation {
      width: calc(95.339% - 32px);
    }
  }
  
  .logged-in #site-navigation {
    top: 32px;
  }
  
  .site-branding {
    padding-top: 106px;
  }

  However you can’t have it start in it’s original position and then stick to the screen edge when it’s scrolled just using CSS.

• 

  patriciaundbeni · Member · Sep 12, 2016 at 3:10 pm

  • Copy link

  thanks a lot…. it’s working, but i can’t scroll down the menu (under-menu point) while using the phone or tablet.

  like this the navigation bar sticks and can’t be scrolled down

• 

  hallluke · Member · Sep 12, 2016 at 5:04 pm

  • Copy link

  Maybe just apply it for screens larger than a tablet:

  @media screen and (min-width: 767px) {
    #site-navigation {
      position: fixed;
      top: 0;
      width: calc(95.339% - 110px);
      z-index: 30;
    }
    .logged-in #site-navigation {
      top: 32px;
    }
    .site-branding {
      padding-top: 106px;
    }
  }
  @media screen and (min-width: 1180px) {
    #site-navigation {
      width: 1070px;
    }
  }

• 

  patriciaundbeni · Member · Sep 12, 2016 at 7:13 pm

  • Copy link

  thanks.
  at the moment the header is white with the logo on it. is it possible to make this header with another colour? or can i make the header less height?
  or is it possible to make the navigation bar higher?

• 

  patriciaundbeni · Member · Sep 12, 2016 at 7:30 pm

  • Copy link

  and is it possible to make a pop up with html code?
  like on that page: http://www.medicalfitness.ch/Group-Fitness
  if you click on the group fitness lessions (zumba, max etc.) a pop up window opens with information about the lession.

• 

  patriciaundbeni · Member · Sep 13, 2016 at 10:13 am

  • Copy link

  and is it possible to have the text field on the front page transparent? at the moment the front page text is in a white box.