I deal with the following problem.
I have a wordpress theme in which there is a left side menu that when I press the hamburger button, it pushes the whole content, header and main container to the left.
What should I look into?
I have tried changing position from fixed to absolute and overflow to overlay but I might now doing it correct.
I cannot provide code because I don't know which file is responsible so, any chance where should I look into?
I am talking about Atelier theme.
Thanks a lot in advance!
This somewhat depends on how the menu is implemented, and without further details it's somewhat hard to say 100% what will work for you.
That said though, if you want to display your side menu over top of the content without pushing it to the right then you would want to set the Z-Index of the menu such that it renders above the rest of the content on the page.
Here is some details that might help you achieve what you are looking to do:
Z-Index
Setting the position attribute for the Manu should do the trick. More information: CSS position property
When you click on hamburger. please check body or content added margin for left side. if left side content margin added then remove margin-left: 0px !important. If added new class then help with jQuery remove this class when your click on hamburger.
Related
When using a tumblr theme, I added an extra row for links, but the page won't automatically scroll. When changing the position to absolute, they scroll, but it doesn't show all the way, nor do the titles scroll. Can anyone help me out with this?
I'm not such what to change/add/remove to have the page scroll properly with the titles moving too.
The original code is here.
And here is the code once I added the last row.
The person who made the theme has deactivated their blog and their credit link leads to some odd site, so asking them for help isn't that easy considering I have no way of reaching them.
I suggest you go for a structure change. Currently because of position: absolute it is difficult to overflow the content in a standard way.
Ideally you should do the following
wrap the following series () in a parent
and style it to be on the right hand side and add the style
overflow: scroll to it.
remove the #columni {margin-left: 530px;} instead make it
display:inline-block;
remove the #columnsi{position: absolute;}
Noormally you can select text with left click function
I work on this Site and am not able to select text in the top areas of the page.
What is wrong with the code?
HTML: link
CSS: link
The footer is on top of the text. Just remove position:absolute form #footer
EDIT:
I can't replicate your issues because my solution is working. Here you can see it
I right clicked the offending text in firefox and used the "inspect element" option, which helpfully tells me what element is sitting directly below the mouse.
Your #footer div is sitting ontop of the text, due to having position:absolute; set with no actual positioning.
If you remove the position:absolute; from #footer and reposition it properly, your problem should go away.
Related note:
I notice that the way you're handling positioning content on the page is a bit weird - you're using position:absolute for nearly everything?
It's outside of the scope of this answer but seriously consider moving away from this -- it's causing this problem and will probably give you a headache in future. That thing you're doing where the contents of your footer have massive margins to push them further down the page past the content? That's an unstable solution and a good sign that your layout has gone wrong somewhere.
This is a fairly simple layout and can be handled fine by basic flow control like floats...
The footer div blocks the text so only the upper part is unselectable. You might want to change your layout or structure of your html and css to avoid blocking the text.
Take a look at this:
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
I'm developing some kind of website builder project, where I can put the page into a edit mode. Then the content moves 50px down and display the "edit bar". Well sounds easy BUT
The background didn't move down ( fixed with background-position-y: 550px);
Absolute Positions where wrong
That's why I'm getting afraid that just moving the site 50px down can break the whole layout. Can this really happen or am I just overreacting?
Might it be better to put the page into an iFrame, but then I have the problem with cross- frame comuniction...
BR
How about putting the background and everything except the edit bar in a container div and then moving that div?
I'm not sure these will help, but just try to gather more ideas for you:
you can use the method Ken mentioned.
preserve the 50px space on top, and hide the editbar, when it is in edit mode, show the edit bar,
place the edit bar on the bottom.