bootstrap affix only on desktop

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
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 '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
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
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   
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
Works only for one row
Works only for one row   Hi, My below code is working only if there is a single row. could you please help me in doing it for all the rows retrieved from the database. <%@page import="java.util.concurrent.CountDownLatch
ModuleNotFoundError: No module named 'kwargs-only'
ModuleNotFoundError: No module named 'kwargs-only'  Hi, My Python... 'kwargs-only' How to remove the ModuleNotFoundError: No module named 'kwargs-only' error? Thanks   Hi, In your python environment
ModuleNotFoundError: No module named 'pytest-only'
ModuleNotFoundError: No module named 'pytest-only'  Hi, My Python... 'pytest-only' How to remove the ModuleNotFoundError: No module named 'pytest-only' error? Thanks   Hi, In your python environment
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
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
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 '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
ModuleNotFoundError: No module named 'desktop-encrypt'
ModuleNotFoundError: No module named 'desktop-encrypt'  Hi, My... named 'desktop-encrypt' How to remove the ModuleNotFoundError: No module named 'desktop-encrypt' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'mac-desktop'
ModuleNotFoundError: No module named 'mac-desktop'  Hi, My Python... 'mac-desktop' How to remove the ModuleNotFoundError: No module named 'mac-desktop' error? Thanks   Hi, In your python environment

Ads