Creating a unique custom theme for Twitter Bootstrap at 1200px and 980px screen sizes

Using the Twitter Bootstrap CSS framework, I have successfully created a custom navigation bar for desktop devices with a width of 1200 pixels and above. Now, I want to create similar navigation bars for other screen widths such as 980px, tablets, and phones. The issue I am facing is that even though I have used visible-desktop, the navigation bar gets distorted when resizing the browser from 1200px to smaller sizes, although it remains visible.

<div id="navigation-div" class="span6 offset2">

    <div id="navigation-nophone" class="visible-desktop">
        <ul class="menu clearfix">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

    <div id="navigation-phone" class="visible-phone">
        <ul class="menu">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

</div>

It seems that when the window is resized to less than 1200px, the layout width changes to 980px but Bootstrap still considers it as a desktop view. I'm unsure how to resolve this issue.

While I can define new parameters for the 980px layout and the 1200px layout, I cannot figure out how to switch between them (since visible-desktop applies to both cases).

P.S.

The navigation switch for phones is working correctly!

htmlcsstwitter-bootstrapresponsive-design

Answer №1

Responsive design with Bootstrap includes desktop layouts for 980px and 1200px widths, both falling under the category of desktop. The conventional responsive utility classes like visible-desktop may not provide the flexibility needed for your customization.

Explore the @media queries in the responsive Bootstrap CSS file, as this is likely the approach you should take.

If you're new to this concept, here's a simple example demonstrating how to adjust background colors based on window width: http://jsfiddle.net/panchroma/XQYJt/

The CSS structure is fairly straightforward:

/* standard desktop */
@media (min-width: 980px) {
body{
background-color: blue;
}
}

/* wide desktop */
@media (min-width: 1200px) {
body{
background-color: teal;
}
}

Note that the sequence of @media blocks can impact the results significantly.

Following the recommendation from user @designguru22 is advisable, leveraging @media queries should give you the control you seek while also enabling the use of a single set of navigation links.

Best of luck!

Answer №2

It's important to use a consistent navigation menu design across all devices and rely on CSS for formatting.

Check out the pre-made Bootstrap templates to see how navigation is handled in a responsive manner. These examples seamlessly adjust as you resize your browser window.

Answer №3

Consider adding this CSS snippet to your personalized style.css document

@media (min-width: 768px) and (max-width: 1280px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar-nav {
        float: none !important;
        margin: 0px;
    }
    .navbar-nav {
        margin: 7.5px -15px;
    }
    .nav > li {
        position: relative;
        display: block;
    }
    .navbar-nav > li {
        float: none !important;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }
    .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    }
    .nav {
        padding-left: 0px;
        margin-bottom: 0px;
        list-style: outside none none;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to turning off the pinch-zoom feature on Windows 8 laptops

I'm currently working on a Windows 8 desktop application where I am using C#, JavaScript, and HTML5. Specifically in the C# portion, I am utilizing the WebView object. My goal is to disable pinch-zoom within my application. I already know how to achi ...

c#htmlinternet-explorerwindows-8internet-explorer-10

Having trouble with margin auto 0 not functioning properly in Safari on iPad?

I'm facing a challenge with centering a div in Safari on iPad. It works fine in Chrome, but in Safari there are margins on the left and right which require scrolling to view the whole content. Any suggestions on how to make this work seamlessly in bot ...

htmlipadresponsive-design

rearranging items from one list to another list

I've encountered an issue in my HTML code that I need help with. I have included some classes for clarity, but their specific names are not essential. My goal is to make the "sub-nav" element a child of the "mobile parent" list item on mobile devices. ...

javascripthtml

Does the body element inherit the line height property?

Below is some simple HTML code consisting of a div and a span: <div id="container">Some text to affect the width</div> <span>A</span> I am currently using Eric Meyer's CSS Reset, which sets the line-height of the body to 1 an ...

cssinheritancefonts

Getting rid of the excess white space below the footer caused by concealed elements

In my design, I have three columns. The rightmost column is filled with 'Divs' containing collapsed information that can be scrolled through using the mouse wheel. The overflow in the center is hidden. The width of all three columns is set to 760 ...

htmlcss

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

Craft an interactive Bootstrap 4 Accordion featuring content retrieved through an Ajax request

I am currently working on setting up a Bootstrap 4 Accordion. Utilizing an Ajax call to fetch the data, I can see the data being logged correctly in the console. My objective is to iterate through the data using a forEach loop and add a new card to the Acc ...

jqueryajaxtwitter-bootstrapbootstrap-4accordion

Shapes and their corresponding encoded representations compiled in a comprehensive catalog

Can anyone provide me with a comprehensive list of HTML escaped codes for displaying various shapes on web pages? I need codes that are universally compatible with all browsers. For instance, I would like to display a square using an escaped code in one ...

htmlasciishapes

Show me a way to use jQuery to show the number of images of a particular type that are on a

My webpage features 6 different images, including 4 of various balls such as basketball and baseball. One image is of a truck, while the last one is random. On the page, there is a form with two radio buttons allowing users to select which type of image c ...

javascriptjqueryhtmlfunctionif-statement

The Vue.js @click event does not function properly when used in a selection on mobile

I designed a dropdown menu with different options, and when one is selected it updates the "Value" in vue to a specific amount. Then, I display the selected amount in an input field. For example: <select class="form-control" style="max-width: 150px;" ...

javascripthtmlvue.js

Ways to Retrieve the Text From the Selected Index in Datalist Element

I need to extract the inner text of the option tag using pure JavaScript This is the HTML code I am working with: <input list="in" name="i_n" class="form-control" placeholder="Enter Item Name" required> <datalist id="in" onChange="rate(this)"&g ...

javascripthtml

Unlock the potential of Bootstrap 4 in Vue.js 2 without the need for bootstrap-vue

I'm interested in finding a way to incorporate bootstrap 4 into my vue.js 2.6 framework. Despite the abundance of tutorials available, many of them are outdated as of late 2020, or they insist on using bootstrap-vue, which introduces unwanted addition ...

javascriptcssvue.jsbootstrap-4

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

javascripthtmljsonaws-lambdaaws-api-gateway

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Blurry text in Webkit browser after applying css transform (translate)

Having an issue with webkit transform. If I don't use -webkit-backface-visibility:hidden ... I notice flickering on many objects when I translate (e.g. -webkit-transform: translate(80%,0)) an object and If I do use -webkit-backface-visibility:hi ...

htmlcsswebkittransformtranslate-animation

How to handle Component binding change events in AngularJS

I have developed a component in AngularJS that displays data. However, when the customer binding changes, I need to call a service in the component controller, but it is not updating. Below is the code snippet: In my Test1.html file: <tab-customer tit ...

javascripthtmlangularjs

How to center text in a DIV using CSS Bootstrap?

I'm a beginner in front-end development and I'm struggling to center the text below the image within this div. I want the text centered just below the image. I'm using Bootstrap for this project, and here's the code snippet I'm wor ...

cssbootstrap-4bootstrap-5

Move to Fieldset Upon Link Click

Here's an example of what I have implemented so far here It's evident that this is not fully functional due to the PHP and jQuery integration. This demo is just a showcase of my progress. I am looking to create a functionality where clicking on ...

javascriptjqueryhtml

Dynamically align text in the center of an image, vertically

I'm trying to create a hover effect where an image and text are displayed in the center of the image when someone hovers over it. Here is how the HTML looks: <article> <div class="entry-content"> <a href="http://www.linktopost.com"> ...

htmlcss

What's the best way to include a div on the right side of my adaptable divs?

I need the "div 1" label to always appear on the right side of the divs, while still maintaining responsiveness. Is there a way to achieve this effectively? Struggling to find a wrapper that meets my responsiveness requirements. #wrapper { width: aut ...

htmlcss