How can I fix the navigation bar?
-
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
-
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.
-
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
-
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; } } -
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? -
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. -
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.
- The topic ‘How can I fix the navigation bar?’ is closed to new replies.