In my code I have a sticky menu to be fixed like a sidebar. I want to have the menu like semantic-ui website.
But, the fixed property only works outside .pusher element. Just like the top fixed menu, in my example.
JSFiddle example
How can I fix that?
Thanks!
Related
Whenever I click on underneath the navbar then It shows like a link, and I don't want that. just like I shown in this picture. https://imgur.com/4JOcVhU
There is some css issues. like padding or hights of your navbar link elements
Whoever is reading this, please, help me out. i have a simple website, a header with a dropdown menu for when it goes responsive and below there's the main content div, called 'porta-contenido' and with only an image inside. header has a position fixed and z-index:1, so 'porta-contenido' has a relative position and top property so it doesn't get behind the header. Now, all is working correctly, but when i try it on mobile, 'porta-contenido' shows an unwanted top padding (you can see it is that div specifically because of the color yellow). i've no idea why this is happening, if i set an element inside this div it will be fine in desktop mode, but when on mobile, it shows the padding.
You can see the website sample here: http://iniziografico.pe/beta/portafolio.html (you can check the mobile effect if you reduce the size of the browser)
And here's the html and css:
jsfiddle(.)net/on3xavwz/
Thanks in advance.
It looks like div#header has position: relative applied under your 480 break-point. Changing this to position: absolute looks like it clears it up.
I wasnt to make something like this site where I can scroll up and down and my menu goes with me, but the logo remains at the top. How did they do this? I tried some CSS, but was not able to get the logo to stay in his place.
it's called a persistent header, it's too long to explain on here so you can use this tutorial: http://css-tricks.com/persistent-headers/
You can start with position:fixed and defining either top and left properties or bottom and left properties.
This web can help you too : CSS Sticky Footer
I have two pages that are almost identical. However on the second page the vertical scroll is not appearing. The problem seems to be the fixed positioning on the nav menu. However, the same CSS is applied to both pages, the second one is using some additional styles that are included at the bottom of the CSS.
Heres the first page that keeps the nav menu fixed and scrolls fine:
http://jsfiddle.net/cGRT8/3/
And then second that doesn't scroll:
http://jsfiddle.net/CC5d7/3/
You're not properly closing your nav-container so your whole document being fixed. Fixed fiddle.
I have implemented a YUI split button with a menu. The button with menu appears in a scrolling div between header and a footer divs. When exposing the menu near the footer div, the menu appears behind the div.
I have tried positioning the footer div with a z-index of -1. I have tried positioning the div (within the scrolling div) containing the button with menu using a z-index of 500. The menu always appears behind the footer div.
I am not using a YUI layout. Yet. If I did would it help?>
In addition to setting the z-index property, you also have to change the position property. The easiest thing to change it to is position:relative.
Try setting both of those properties.
I don't think YUI layout will assist you in this particular problem.
I started using YUI layout and my issues no longer exist.