Maximize the use of block level buttons on the navbar menu for small screens, while maintaining the regular size buttons when the menu is expanded in

Currently utilizing bootstrap 4 beta.

In my navbar, standard sized buttons are used as nav-items when the screen is full-sized. These buttons align to the right of the navbar next to the site logo positioned on the left side of the navbar.

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

When the screen is small and the hamburger menu is toggled, I want these buttons to span the width of the navbar's dropdown menu.

Currently, the buttons are aligned to the left as shown in the image below.

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

I believe that using block-level buttons might achieve the desired result in the dropdown menu, but they wouldn't work on the full-sized navbar...

My inquiry is how can I have the buttons in the second image extend the width of the dropdown menu when the hamburger menu is toggled, yet remain normal size when the screen is large and hasn't collapsed into the hamburger menu like in the first image?

htmlcssbootstrap-4

Answer №1

After incorporating width: 90vw; into a css media query, the problem seems to have been resolved:

#header-button {
    margin-top: 0.5;
    margin-bottom: 0.5;    
    margin-left: 0rem;
    margin-right: 0.5rem;

}

@media (max-width: 987px) {  
#header-button {
    width: 90vw;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    padding-bottom: 0.8rem;
    margin-left: 0.2rem;
}

}

This adjustment has resulted in the appearance shown below:

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

However, I noticed that there is now a black blob covering my logo...

Fortunately, this modification did not require altering the button class, and I stumbled upon this solution from the last answer in a related stackoverflow question linked here:

Set CSS class equal BootStrap class with media query

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

Prevent an element from being animated by CSS

Currently tackling a frustrating bug while working on a component. The issue arises when clicking on a div that opens a menu, contained within a React component which is nested inside another. Below is the CSS styling: const FilterBox = styled("div")` ...

javascripthtmlcssflexbox

Implementing the decrement functionality within an onclick event handler for a variable

Can someone assist me with this issue? I am trying to use a variable ID in HTML to call a function on a JavaScript page. For example: (Minus button not functioning) <button class="minus-button quantity-button button" type="button" name="subtract" onc ...

javascriptjqueryhtmlfunction

What is the optimal method for delivering HTML content in a Node.js application using Express.js?

My current approach involves serving all HTML content directly from my app.js/server.js file, as shown below: app.get('/', function(req, res) { res.render('index.html'); }); app.get('/about', function(req, res) { res. ...

htmlnode.jsexpressstatic-files

What is the best way to combine attributes in AngularJS?

I am looking to display a list of attributes as a comma-separated line in HTML: json { "city":"<b>londo</b>", "country":"<i>uk</i>", "zip":"123" } Since I need to render HTML markup, I am using the ngSanitize directive ...

javascripthtmlangularjs

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default style ...

cssreactjswordpressmaterial-uicss-specificity

Wordpress Issues with Displaying Arabic Text Correctly

The issue arises when displaying Arabic text in menus, both the top menu and main menu. The text appears distorted and unreadable, with characters like 2Ø®Ø§Ù†Ù‚Ø§Û showing up. However, in other areas of the page such as the body content, the ...

htmlcsswordpress

Hiding Certain Words on a Website

Is there a way to hide specific text strings on a website? For instance, suppose I want the string "hxxp://nullrefer.com/?" to be invisible whenever it appears on my page. If a URL like "hxxp://nullrefer.com/?hxxp://www.Amazon.com" is mentioned, I only w ...

phpjavascripthtmlcloaking

Developing alternatives for CSS Grid

Currently, I am faced with an intriguing challenge involving a layout that includes a container containing 9 div elements. Each of these divs is assigned one of three classes: column-1, column-2, or column-3. <div class="grid cols-3"> <div cl ...

htmlcssflexboxcss-grid

Supervising the clash of schedules between parents and their children's commitments within

Here is a snippet of code for you to examine: <div onmousedown="alert('onmousedown');"> <div onclick="alert('onclick');"></div> </div> I am curious, is it possible to disable the onmousedown event while the ...

javascripthtml

Personalize product image

Currently, I am involved in a project that involves the creation of custom trading cards for clients. However, I am facing difficulty in finding a way to overlay the card template so that users can upload their photos into a specified box. Various methods ...

javascriptphpjqueryhtmlcss

Retrieve the toggle input value to change the page view using jQuery

I'm currently working on a web photo gallery project and I am looking to incorporate a toggle input button that allows users to switch between displaying albums or all photos. To achieve this, I need to extract the value of the input using jQuery and ...

javascriptjqueryhtmlajax

"Why isn't my variable working for the address when trying to append an image source using jQuery

Currently, I am using jQuery to add a variable from nodeJS/MongoDB that contains the address of a profile picture. For example: profile_pic-1512068176863.gif. My issue is that when I directly copy and paste this value into a string, the image displays with ...

javascriptjqueryhtml

I'm looking to generate a semicircle progress bar using jQuery, any suggestions on how

Hi there! I'm looking to create a unique half circle design similar to the one showcased in this fiddle. Additionally, I want the progress bar to be displayed in a vibrant green color. I've recently started learning about Jquery and would apprec ...

javascriptjqueryhtmlcss

Utilize AJAX to retrieve the output of a PHP randomizer

Current situation: I have a PHP file with a randomizer function and HTML that utilizes this function to display strings from a separate text document. The Function: <?php function rand_line($fileName, $maxLineLength = 4096) { $handle = @fopen($fileN ...

javascriptphpjqueryhtmlajax

JavaScript struggles when dealing with dynamically loaded tables

I am currently working on integrating the javascript widget from addtocalendar.com into my website. The code example provided by them is displayed below. Everything functions as expected when I place it on a regular page. However, I am facing an issue wher ...

javascriptphpjqueryhtmlajax

Unable to adjust the text color to white

As someone who is new to Typescript, I'm facing a challenge in changing the text color to white and struggling to find a solution. I'm hoping that someone can guide me in the right direction as I've tried multiple approaches without success ...

csstypescriptmaterial-ui

JavaScript random number functionality experiencing an unexpected problem

function generateRandomNumbers(){ var max = document.getElementById('max').value; var min = document.getElementById('min').value; var reps = document.getElementById('reps').value; var i; for (i=0; i<reps ...

javascripthtmlrandomnumbers

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

I'm at a standstill with the onclick function, even after searching on Google I couldn't

I've been struggling to make this work and have tried everything I found on Google, but I'm still stuck. What I'm trying to achieve is loading the value of (div id="availablecredits") into (div id="beta") when clicked. Can anyone help me wit ...

javascripthtml

Using AngularJS to dynamically change the background color of table rows based on the values stored in a data structure

I am looking to implement dynamic color backgrounds for table rows based on the state of a specific data structure Below is my attempt: <tr data-ng-repeat="shipping in shippings" data-ng-init="shippingIndex = $index" data-ng-class=& ...

javascripthtmlangularjs