I cannot figure out, how to make mobile menu full-width. When I click on hamburger menu, it opens up, but it's only like regular dropdown.I tried many ways to change it, but can't figure it out.
Here is the link: https://dev.povoden.cz/
Add style position: static to class "et_pb_menu_inner_container" and "et_pb_column--with-menu"
You can use the following way.
.et_mobile_menu {
position: fixed; /* Instead of absolute */
top: 90px !important; /* Adjust it to set the top value */
}
So I am not sure which version and such you are using. Whilst divi does some great things in terms of making building easier. It means they often make it very difficult to find out why normal CSS doesn't seem to work.
I have a similar issue and I was using the theme builder to build a global header. None of the CSS I tried seemed to work.
I was unable to find where the width was being set and how to overwrite it.
The solution in the end was simple.
When in the theme builder.
New Section (fullwidth)
New Row (full width) - THIS is what actually fixes the problem
Please checkout the attached screen shot
how to adjust the menu
Related
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
I am redoing a Wordpress website, and I am having a problem with the menu. I am using the Compass theme and this is what the top menu looks like.
Then when I do
#MainNav {
width: 100%;
white-space:nowrap;
}
in Custom CSS in Wordpress, the menu goes beyond the page.
Any suggestions? I want the menu to appear in one line and to dynamically resize. I have done extensive Googling and have tried anything I could find, including flexboxes, but nothing has solved it. I am also very new to Wordpress and don't really understand the file structure, and I'm also pretty new to asking on Stackoverflow!
I find the easiest way to get my menu to fit in a theme I didn't design is to write CSS overrides that adjust the padding and font size of the list items in the menu. Usually I do this in a media query so that only certain breakpoints are affected by my change. Here's an example of how you could get the menu items to fit nicely. Make the margin-right on the li 0. You can also adjust the font size on the li > a if you need more wiggle room.
Adjust the margin-right so it is 0
If you were not using a media query, your custom CSS would look like this:
#menu .ddsmoothmenu li {
margin-right: 0;
}
Your idea of flexbox seems to work okay as well. Although the menu may look a little funky on tablet size screens.
Flexbox
One final note, I always use a child theme when customizing a theme I didn't design. This way you can, in an organized way, customize the theme and not lose any of your code when the parent gets updated. You can read about child themes here:
https://codex.wordpress.org/Child_Themes
Site URL: http://www.midwestcleancomedy.com
Please advise on the best way to present my question and the info you need as I'm a beginner. Here's a codepen I created that just has my custom CSS at the top, and the parent theme CSS which starts at line 252
I've cleared my cache, enlisted WP designers, and they were unable to pinpoint what is going on. Some of my early custom CSS worked, but most of it is being ignored, even if it's at the bottom of my stylesheet with !important as a last resort.
Since this happens many places, I feel like once I find the issue it will hopefully lead to solving others. It's now affecting nearly every change I want to make.
Current issue: Making my site responsive at the mobile width,
#media (min-width:320px) and (max-width: 479px) {
. container .et_header_style_left #logo {
max-width: 80% !important;
float: left;
}
}
Just trying to get the logo on the left and the menu icon on the right, same line, but nothing I try seems to change the logo width or the menu's left padding: 175px.
I had someone look at my style sheet, and it was a mess. I don't know exactly what they did, but they said there were formatting errors everywhere. #media issues abounded. Sorry I can't be much more specific, but basically I had to start a brand new style sheet and make much better notes. Thanks to everyone who responded.
I'm new to wordpress and website building. Just bought a theme and faced an issue.
I want to put my image over accordion div container. How I can do that? My theme has content building option, but as far as I know it doesn't support creating layers feature (nor any other content builder plugins, like this or this
I would really appreciate any kind of help!
If you find a way to customize the CSS, this should do the trick:
.column.one {
position: absolute;
z-index: 2;
}
The property position:absolute allows you to position the image freely using the CSS properties top, left, right and bottom.
z-index:2 makes sure, that the image is in front of the accordion.
Edit:
Turns out that there is one more problem: since the image overlaps the accordion, the overlapped areas are not clickable anymore. To solve this problem, you can use the CSS property pointer-events:none. But beware! This is not supported by IE and Opera. You may need to find a workaround for these browsers.
Browser Compatibility Table: http://caniuse.com/pointer-events
Article about the Property: http://www.sitepoint.com/css3-pointer-events/
This is what I am trying to achieve:
This is what I get:
Please view the JSFiddle of this with web-kit browser (Chrome or Safari): http://jsfiddle.net/KqEqN/
This is happening when you narrow the screen but there's still visibly enough space for the button.
I've looked into CSS trying to find some sort of padding to the right of the button but couldn't. Also where the hell that horizontal line comes from?
I'm not familiar with jQuery Mobile, so I might be doing this wrong. My guess is that you must add extra classes instead of overriding jQuery Mobile's theme.
The fix involves:
.ui-input-search {
width: 50px;
display: inline-block;
}
Check it in action here: http://jsfiddle.net/NqFhQ/