bootstrap affix only on desktop

Ads
 

bootstrap affix only on desktop

Hi,

I am using bootstrap plugin to affix right navigation bar when user scrolls. But my problem is that the screen get fixed in the mobile/tablet screen also.

I want the bootstrap affix only work on desktop screens. When my website is browsed on the mobile devices bootstrap affix should not work there.

So, how I can enable bootstrap affix only on the desktop browsers?

Thanks

View Answers

July 22, 2018 at 8:15 PM

Hi,

Bootstrap affix plugin is great plugin for fixing navigation bar at a particular position.

You also disable it in the mobile browser and enable in the desktop browsers only.

Add following media query in your website:

@media (min-width: 768px) {
    .affix {
        position: fixed;
    }
}

This will enable affix only in desktop browsers.

Thaks

Ads









Related Tutorials/Questions & Answers:
bootstrap affix only on desktop
bootstrap affix only on desktop  Hi, I am using bootstrap plugin... get fixed in the mobile/tablet screen also. I want the bootstrap affix only... affix should not work there. So, how I can enable bootstrap affix only
ModuleNotFoundError: No module named 'affix'
ModuleNotFoundError: No module named 'affix'  Hi, My Python program is throwing following error: ModuleNotFoundError: No module named 'affix' How to remove the ModuleNotFoundError: No module named 'affix'
Advertisements
ModuleNotFoundError: No module named 'affix'
ModuleNotFoundError: No module named 'affix'  Hi, My Python program is throwing following error: ModuleNotFoundError: No module named 'affix' How to remove the ModuleNotFoundError: No module named 'affix'
Bootstrap Tutorials
application developed in bootstrap is mobile and desktop friendly. If you are web designer then you can use Bootstrap to design mobile/desktop friendly website which can be displayed both in mobile and desktop devices. Bootstrap is popular
Bootstrap Tutorials
application developed in bootstrap is mobile and desktop friendly. If you are web designer then you can use Bootstrap to design mobile/desktop friendly website which can be displayed both in mobile and desktop devices. Bootstrap is popular
Bootstrap Tutorials
application developed in bootstrap is mobile and desktop friendly. If you are web designer then you can use Bootstrap to design mobile/desktop friendly website which can be displayed both in mobile and desktop devices. Bootstrap is popular
desktop application
desktop application  how to transfer data swing text field to browser text field to their corresponding label/caption. please reply as soon as possible. thanks vijay
bootstrap 4 pull-right
4. The class .pull-right is only available in Bootstrap 4. If you want...bootstrap 4 pull-right  Hi, I am trying to align a button with the .pull-right class but don't know why its not working in Bootstrap 4. I just
bootstrap 4 pull-right
4. The class .pull-right is only available in Bootstrap 4. If you want...bootstrap 4 pull-right  Hi, I am trying to align a button with the .pull-right class but don't know why its not working in Bootstrap 4. I just
ModuleNotFoundError: No module named 'desktop'
ModuleNotFoundError: No module named 'desktop'  Hi, My Python... 'desktop' How to remove the ModuleNotFoundError: No module named 'desktop... to install padas library. You can install desktop python with following command
Digit Only text field
Digit Only text field  How should we accept digits only in a textbox? (using JSTL only, without Javascript
ModuleNotFoundError: No module named 'only'
ModuleNotFoundError: No module named 'only'  Hi, My Python program is throwing following error: ModuleNotFoundError: No module named 'only' How to remove the ModuleNotFoundError: No module named 'only' error
ModuleNotFoundError: No module named 'bootstrap'
ModuleNotFoundError: No module named 'bootstrap'  Hi, My Python... 'bootstrap' How to remove the ModuleNotFoundError: No module named 'bootstrap' error? Thanks   Hi, In your python environment you
How to install Bootstrap 4?
is small while for desktop is more (e.g. browser size). Bootstrap is mobile...How to install Bootstrap 4? Learn to download, install and create hello world program in Bootstrap 4 The first step towards learning Bootstrap 4
How to install Bootstrap 4?
is small while for desktop is more (e.g. browser size). Bootstrap is mobile...How to install Bootstrap 4? Learn to download, install and create hello world program in Bootstrap 4 The first step towards learning Bootstrap 4
How to install Bootstrap 4?
is small while for desktop is more (e.g. browser size). Bootstrap is mobile...How to install Bootstrap 4? Learn to download, install and create hello world program in Bootstrap 4 The first step towards learning Bootstrap 4
Only Display Date
Only Display Date  I want to implement only date not time like that 20 Sep 2011. How can possiple it?   Your question is not clear. Which technology you use? java/.NET/SQl
Allowing only localhost in Elasticsearch
Allowing only localhost in Elasticsearch  Hi, I have installed Elasticserch on the production platform. Now I want to enable its access only from localhost. How I can allow Elasticseach from localhost only? Thanks   
Version of tomcat>bootstrap dependency
List of Version of tomcat>bootstrap dependency
Installing Bootstrap 4 with bower
Installing Bootstrap 4 with bower  HI, I am using Bower and want to install the Bootstrap 4 with bower? What are the steps for Installing Bootstrap... Bootstrap 4 with bower: bower install bootstrap#4.0 Above command will install
Installing Bootstrap 4 with bower
Installing Bootstrap 4 with bower  HI, I am using Bower and want to install the Bootstrap 4 with bower? What are the steps for Installing Bootstrap... Bootstrap 4 with bower: bower install bootstrap#4.0 Above command will install
Installing Bootstrap 4 with bower
Installing Bootstrap 4 with bower  HI, I am using Bower and want to install the Bootstrap 4 with bower? What are the steps for Installing Bootstrap... Bootstrap 4 with bower: bower install bootstrap#4.0 Above command will install
UIView landscape only
UIView landscape only  HI, How to display your view in landscape orientation only? Thanks   Hi, You use the following code in your view controller class: - (BOOL)shouldAutorotateToInterfaceOrientation
mysqldump structure only
only? Provide me the syntax to take mysqldump structure only. Thanks   Hi, You can use -d option with mysqldump command to take the structure only... to dumb only tables definitons , not the data ? use ?d command? if path is not set
Version of co.paralleluniverse>capsule-desktop dependency
List of Version of co.paralleluniverse>capsule-desktop dependency
Version of com.axiastudio>zoefx-desktop dependency
List of Version of com.axiastudio>zoefx-desktop dependency
Version of com.jalalkiswani>jk-desktop dependency
List of Version of com.jalalkiswani>jk-desktop dependency
Version of com.jalalkiswani>smart-desktop dependency
List of Version of com.jalalkiswani>smart-desktop dependency
Version of com.rhcloud>timemanager-desktop dependency
List of Version of com.rhcloud>timemanager-desktop dependency
ModuleNotFoundError: No module named 'cursed_desktop'
ModuleNotFoundError: No module named 'cursed_desktop'  Hi, My... named 'cursed_desktop' How to remove the ModuleNotFoundError: No module named 'cursed_desktop' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'desktop-file'
ModuleNotFoundError: No module named 'desktop-file'  Hi, My Python... 'desktop-file' How to remove the ModuleNotFoundError: No module named 'desktop-file' error? Thanks   Hi, In your python

Ads