What is the best way to adjust the mobile menu in Wordpress so that it takes up half of the screen width?

Encountering an issue after installing the "Mobile Navigation" Wordpress Plugin to implement a mobile menu on my custom theme that currently occupies 100% of the screen width. How can I adjust it to occupy only 50% of the screen width, as shown in the concept below?

https://i.sstatic.net/0B2hM.jpg

Here is the CSS for the mobile menu:

.mn-navigation-wrap.mn-dark [class*="icono-"] {
  color: #000; }
  
/* Rest of the provided CSS code here */

For more information, please visit my development URL

csswordpress

Answer №1

If you want to enhance your CSS skills, consider using Google Chrome to inspect elements and experiment with styling on your own. The following code snippet addresses some basic issues that can be easily resolved. Make sure to insert the code below into your stylesheet at the end.

There are a few things to fix here. Firstly, remove the red background applied to the HTML element. Then, adjust the width property to your desired percentage value.

@media only screen and (max-width: 700px){
   html.mn-open{
      background: none;
   }

   .mn-navigation-wrap{
       width: 50%; 
   }
}

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

Infinite spinning wheel on the WooCommerce site's checkout page

Upon proceeding from the cart page to the checkout page, I encountered an issue where everything loaded on the page except for the payment section which was "grayed" out and continuously displayed a spinning icon. This prevented me from progressing to the ...

ajaxwordpresswoocommercecheckout

Customizing the styling of a TextField component in ReactJS using material-ui

I am currently working with Reactjs and material-ui. I am looking to apply some custom styles to a TextField using css. Specifically, I would like to change the color of the TextField underline and label when the input is clicked. Although I know it can b ...

javascriptcssreactjsmaterial-ui

Select2 input field not receiving focus when navigating by tab key

When attempting to tab through the fields, I encounter an issue where the fields do not highlight as expected. Despite trying various solutions, such as the following CSS code: .select2-selection__rendered:focus { outline: none !important; box-shadow: ...

cssbootstrap-4accessibilityjquery-select2

Jquery ripple effect does not function properly with background-attachment: fixed style

Is there a way to make the effect ripples () work with background-attachment: fixed? I'm trying to achieve this effect while keeping the background fixed in place. Any suggestions on how to make this work? background-attachment: fixed; ...

javascriptjquerycss

The text is obscured by the overlapping div within the parent div

Here is the code snippet I am working with: .pa { width: 400px; background: #008000; position: relative; } .icon-wrap { height: 100%; float: right; width: 30px; background: yellow; padding: 5px; position: absolute; top: 0px; right: ...

htmlcssoverlapping

Issue involving two cards within a radio group

Within my design, I placed a radio button in two cards and grouped them together by nesting the cards inside a btn-group. While this setup functions well, it encounters layout issues on small display sizes. Specifically, when the screen shrinks to xs size, ...

htmlcssbootstrap-4

Establishing the footer within dompdf

This snippet demonstrates the specified behavior (jsfiddle). <!--Footer--> <div id="footer"> <span class="alignleft">$unique_ID</span> <span class="alignright"> Page <span class="pagenum"></span></span> < ...

phphtmlcssdompdf

Challenges with resizing floating divs

As a beginner in Web Development, I am tasked with creating a web portfolio for an assignment. In my design layout, I have a navigation bar in a div floated left, and a content div floated right serving as an about me section containing paragraphs and lis ...

htmlcsscss-floatwindow-resize

Is it possible to adjust the height of input fields in MUI Reactjs?

Having trouble adjusting the height of input textfields using in-line css. <FormControl sx={{ "& .MuiOutlinedInput-notchedOutline": { borderColor: "blue", }, "&.Mui-focused .MuiOutlinedInpu ...

cssreactjsmaterial-ui

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

cssrkableextra

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

Should elements be concealed with CSS if they cannot be eliminated with php?

There are times when I struggle to deactivate a function or elements in PHP, particularly in PHP frameworks and CMSs. As a workaround, I often utilize display: none. However, I am concerned about potential issues this may cause in the future. Should I co ...

phpcss

"Encountered an issue while setting up WordPress on OSX using Nginx and

issue resolved I am trying to set up Wordpress on my macOS. Here are the steps I have taken: $ brew install nginx $ brew install --without-apache --with-fpm --with-mysql php55 Downloaded the latest wordpress.zip and extracted it to /var/www/wordpress_t ...

phpwordpressmacosnginx

Press on the menu <li> item to create additional submenus

A group of friends is facing a challenge. They want to create a dropdown sub-menu that appears directly below the selected item when clicking on a link from a menu. So far, they have been able to use ajax to send requests and generate a sub-menu. However, ...

javascriptjqueryhtmlcssmenu

How to maintain the side padding of a table within a Bootstrap 4 card?

JSFiddle: Click Here In my design, I have a table within a card element. However, when the window size is reduced to mimic a mobile device, the left padding remains intact while the right padding disappears. How can I ensure that the right side padding is ...

cssbootstrap-4

Can anyone suggest a way to ensure that this text's CSS animation is responsive for smaller screens?

I'm currently working on a text slide-in animation, but I'm facing an issue where the text doesn't stack properly on small screens and ends up running off the screen. I want the two sentences to be on the same line for large and extra-large ...

htmlcssanimationtextresponsiveness

I've attempted various methods but the header stubbornly refuses to change its color

Looking for help with my website I'm working on changing the header menu color on my site. I managed to change the colors of the menu items themselves using code provided by someone here, which was great. However, I'm struggling to change the de ...

csswordpressmenucolorsheader

Position the menu links in different alignments - some to the right and others to the

I have created a horizontal menu using HTML and CSS. Currently, the links (boxes) are displayed from left to right, floated to the left of the page. However, I am looking for a way to make one of the links (boxes) float to the right side of the page. I at ...

htmlcss

Only scroll the div if it is not within the visible window

I've been looking at this snippet: The sidebar division is what I'm focusing on right now. I want the div to scroll along as I scroll down the page, but I need it to stop scrolling when its bottom is in view. The same should apply when scrollin ...

javascriptjquerycss

Struggling with a clash of styles between the float property and the navigation style in HTML

When I apply the float:left style to my <ul>, why does the nav bar appear very large? Consider this example: <ul class="nav" id="ModuleContainer" runat="server" style="float:left"> <li>111111----------------------</li> < ...

htmlcsshtml-lists