CODEWITHSUNDEEP
htmltwitter-bootstrap
hellfragger
hellfragger

Reputation: 153

How to switch html pages based on screen size in bootstrap

I am creating a personal website and I want to make sure they look good on devices with different screen sizes. I have a project page which will have different layout based on which device it is viewed on.

In desktop screen I want a vertical navbar which slides down as the user scrolls down the page and will contain links to jump to specific locations in that page.

However in a mobile phone screen I want to completely remove the vertical navbar and just have a horizontal navbar below the main navbar and then each section will have an arrow back to the top of the page. This way a user can select a link from the horizontal navbar and when done can simply click back to top arrow and end up on the navbar to select next link.

To achieve this I am planning to create two pages projects.html and mprojects.html with the said layout. However how do I select between this two .html files based on screen size in bootstrap?

Upvotes: 0

Views: 310

Answers (1)

Jesse Tessmer
Jesse Tessmer

Reputation: 21

Rather than creating two separate HTML files, you can create a single one with both navbars and show/hide them using responsive CSS.

.vertical-nav {
    position: fixed; // To keep it "sticky" when the user scrolls
}

.horizontal-nav {
    display: none;
}

@media (max-width: 768px) { // This can be whichever px value suits your site

    .vertical-nav {
        display: none;
    }
    .horizontal-nav {
        display: block;
    }

}

Just make sure to set your navbar's classes to "vertical-nav" and "horizontal-nav" respectively.

Upvotes: 2

Related Questions