Create a compact three-line menu design optimized for larger screens

https://i.sstatic.net/uWiFP.png

When the three-line menu button in the image is clicked, four links are displayed. The issue at hand is that this menu only works for small screens. I want to change this so it displays on larger screens such as 767px and above. However, I am unsure where in my CSS file to place the necessary code adjustments. Can someone assist me with this problem?

Css_File

@charset "utf-8";
/* CSS Document */

.navbar-default[role="transparent_navbar"] 
{

  background-color: white;
  border-color: white;
}
.navbar-default {
  background-color: #787878;
  border-color: #5e5b60;
}
.navbar-default .navbar-brand {
  color: #6ecd6e;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffb600;
}
.navbar-default .navbar-text {
  color: #6ecd6e;
}
.navbar-default .navbar-nav > li > a {
  color: #6ecd6e;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffb600;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #787878;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #6ecd6e;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #5e5b60;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-toggle {
  border-color: #5e5b60;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #5e5b60;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #6ecd6e;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #6ecd6e;
}
.navbar-default .navbar-link {
  color: #6ecd6e;
}
.navbar-default .navbar-link:hover {
  color: #ffb600;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #6ecd6e;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffb600;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffb600;
    background-color: #5e5b60;
  }
}
jquerycsstwitter-bootstrap-3navbar

Answer №1

Referring to a solution from another inquiry, implement the following custom CSS code in order to display the 3 line menu button across all screen sizes without using media queries.

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

Answer №2

To implement the desired CSS changes to your website, follow these steps:

  • Show the entire navbar on devices with a width of at least 767px.

  • Display the three lines for the navbar on screens that are narrower than 767px.

    @media (min-width: 767px)
  // Update styles for full navbar display

@media (max-width: 767px)
  // Adjust styles for collapsed navbar

Answer №3

Grateful to everyone for generously sharing their time. I stumbled upon the perfect solution by following the link provided below

By incorporating the following CSS code, I was able to find exactly what I had been looking for.

Code

@media (max-width: 1000px) {
  .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Answer №4

One potential solution is to utilize Jasny's Plugin for creating an offcanvas Bootstrap menu. You can find more information and access the plugin through this link:- Jasny Plugin For Offcanvas Bootstrap Menu

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

Modifying email alters the appearance of the input element

Utilizing labels as placeholder text behind input boxes with a transparent background, changing to white on :focus and when input value is > 0, I created a contact form. However, integrating PHP into the form recently caused styling issues. Although I m ...

phpjavascriptcssforms

Automatically reload main page in Javascript upon closing child window (popup)

I am working with 3 php files: view.php, edit.php, and edit2.php. In view.php, I display the content of my database tables. edit.php is used to edit a specific row using textboxes, while edit2.php is responsible for updating changes in the database. Once ...

javascriptphpjquery

The functionality of Access-Control-Allow-Origin is not effective in Chrome, yet it operates successfully in Firefox

I'm facing an issue with my code in the HTML file. I have a second file that I want to load content from, and both files are located in the same directory <div id="mainMenu"></div> <script> $(function() { $('#mainMe ...

jqueryhtmlajaxhttpgoogle-chrome

Mouse over condensed text to show more information without impacting nearby elements

I have implemented a text-overflow: ellipsis on an element, and then added a hover effect to expand the text. How can I prevent this expanded text from affecting other elements above or below it? Here's how I've set the text: .box h3 { overfl ...

jqueryhtmlcss

Adjusting the CSS of an element based on varying languages

Is it possible to utilize CSS for text styling based on the language being used? For instance, the font Tahoma is commonly used for Arabic text, but its size may appear extremely small when applied to English text of the same size. Therefore, in scenario ...

javascriptcssfont-sizetypography

Automatic playback of the next video in a video slider

Looking to upgrade my video slider functionality - switching between videos, playing automatically when one finishes. Struggling to find a solution that combines manual control with automatic playback. My attempt: function videoUrl(hmmmmmm){ ...

javascripthtmlcss

Internet Explorer is failing to render SVG as content within a pseudo element such as :before or :after

Looking to tackle an issue that stems from the following discussion: Is there a way to use SVG as content in a pseudo element :before or :after. I'm attempting to add a svg triangle after a div using a pseudo-class. div{ background-color: black; w ...

cssinternet-explorersvginternet-explorer-11

Slick Slider fails to load on web browsers

Hi everyone, I have a snippet of HTML code that I need help with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> </head> <body> ...

javascriptjqueryhtmlsliderslick.js

The background appears after the drop down menu text

I created a menu with a drop-down effect using CSS3 transitions. However, my issue is that the text is visible before the background appears, which goes against the intended design. Here is a link to my JSFiddle. HTML: <nav> <ul> ...

htmlcssdrop-down-menu

Making the navbar color modifications to the dropdown menu

I am currently working on applying color changes to the text in my navbar for the links that have been visited, are active, and are being hovered over. I have successfully implemented this for my regular hyperlink elements. However, I am facing an issue wi ...

htmlcssnavbar

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

In my simple HTML table, I am trying to align the text in all columns to the right side in the second row. After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The widt ...

htmlcsshtml-table

Tips for accessing the descendants and grandchildren of a list item

Is there a way to display the sub-categories under the sub-categories of SALE using the JSFiddle provided here? Specifically, I'm looking to show additional categories that fall under SALE > BELTS and SALE > ACCESSORIES. The code snippet below c ...

jquery

Vue.js Ready event is not firing

In my Vue function, I have two methods. The first method, postStatus, is used to save a post when the user clicks on the save button. The second method, getPosts, is used to retrieve all previous posts from the database for that user. Below is the Vue.js ...

javascriptjqueryajaxvue.js

Is it feasible to implement endless (limited?) scrolling on a stationary html page using Javascript?

I am looking for a way to dynamically fetch sections of large HTML files stored in S3 and display them using JavaScript. Is there a method where I can fetch a portion of an HTML file, show it on the page, then load the next part as the user scrolls down? ...

javascriptjqueryhtmlstatic

Why is the Social Media Widget not showing up on my gallery pages and posts?

I have a question about using the Social Media Widget with the touchfolio theme. I want the widget to always appear at the bottom left of my pages, posts, and galleries, but I'm having trouble getting it to show up on my gallery. Currently, it only s ...

csswordpresspluginswidgetsocial-media

jQuery Summation: A Step-by-Step Guide

Hello everyone, I am a new member of this forum and I am looking forward to learning and contributing with all of you. I have encountered a problem that I tried to solve on my own but couldn't figure it out. Would anyone be able to lend me a hand? H ...

jqueryhtmlcss

How to use jQuery AJAX POST to submit form data without refreshing the page and insert it into a MySQL database

After completing three tutorials, one on submitting form data to a php file, another on writing data to a mysql table, and the third on using jQuery AJAX for seamless form submission without page redirects, I encountered an issue. If you're intereste ...

phpmysqlformsjquery

Is there a way to modify localStorage without having to refresh the page?

I'm currently working on a shopping cart that pulls products from a json-server. So far, I've successfully displayed the products, added the functionality to add items to the cart, and show the quantity. However, I'm facing a roadblock with ...

javascripthtmlcssjsonlocal-storage

The navbar-fixed-top class in Bootstrap seems to be malfunctioning

As I work on expanding my portfolio website using Bootstrap, I decided to incorporate the 'navbar-fixed-top' class to make the navigation bar stick to the top of the window. I found a helpful example of this feature here: https://getbootstrap.co ...

htmlcsstwitter-bootstrapbootstrap-4

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface