Difficult to explain so I made a fiddle...
As you can see when you press the button and toggle the span or notification the div or icon shifts to the left...
Is there any way in CSS to make the icon stay in place? I'm sure it's something simple that I'm overlooking or overthinking.. Thanks.
If you position your notification icon absolutely it won't take up any space.
Just change the positioning on .todoListNotification to absolute and change left to something like 15px.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Related
I need to add new functionality to projekt. On top I have menu with z-index:999 (position:relative) ( I ty to reduce z-index but component is too extensive.
Lower I have my component and inside i have button that opens a modal.
And here's the problem
I have modal on sticky position (top, right, bottom, left - 0).I want this to cover the entire page.(z-index:99999)
But unfortunately the menu component is upper.
Do you have any idea how to fix this?
Thanks
Is there any overflow: hiddens? if so try removing those lines.
Okay, I fixed this. I needed to extract the component with the modal from the parent element.
I am struggling to place a button at a absolute position. When I use float:right, Its too much for me , I also used position:absolute and right:350px however this gives me problem in resizing the browser.
So How can I place my button such that I can use float:right minus certain space?
On this page: http://diablogym.net/
When you use a mobile device like a tablet or cell phone the logo covers the menu icon button. I want that icon to appear on the right - logo on the left. I can't figure out how to do that. Can anyone supply the css to fix that?
thanks!
The styles on this site seem very messy...
In order to fix it I removed the float, position, width and height from '.nicdark_logo' (why is the height set to 10px?). I also took the position: absolute; off of '.nicdark_logo img'. This makes the logo appear above the menu.
Beyond these changes, I would suggest centering the logo and scaling it down a bit so your sticky header isn't taking up so much of the page.
I have a CSS menu here
http://www.salvationarmyqc.org/
When I hover the mouse over the menu, it shifts but only the first time a hover event occurs.
After that, it doesn't move.
I can't figure out why this is happening.
Are you able to post your css?
By the looks of it, you are setting a border width on hover which pushes the menu item down. You might try using absolute positioning, and adjusting the top height by -1 or a similar value.
for example your css might look something like.
#listContainer{position:relative;}
.listItem{position:absolute;top:0;}
.listItem:hover{top:-1;}
Im not sure why the entire navigation menu moves down in chrome without seeing your css.
your #navigation is jumping from a height of 34 to 36px. you could statically set it to 34pixels or put padding and margin to 0 for all of the li's.
I have a div box (absolutely positioned), which is expandable and below that I have another div box non-expandabe (relatively positioned).
Now when that absolutely expandable div expands, the one below that dosen't shifts down.
Is this not possible ?
Had my code been not too long, I would have placed it here... Can anyone help me on this..
When you absolutely position something it removes it from the flow the document, so it just overlaps stuff and doesn't push anything out of the way. Perhaps the first div doesn't need to be absolutely positioned?