Is there a way to set a menu in a Wordpress DIVI site as static?
#main-header {
position: fixed !important;
}
For instance, like this.
The menu stays on the top and as you scroll down, you no longer see it. So it does not go as a sticky menu. Please share your thoughts!
Cheers,
Just a regular dude
For the Divi theme, the easiest solution is to just set it in the themes settings. Divi -> General -> Fixed Navigation bar, and then turn it off. Look at the attached screenshot: https://www.screencast.com/t/VZyvBc3Am
BTW, putting the position to fixed will make the menu always stay in the same position in your browser, so it will do the exact opposite of what you want. Let me know if this helped
Related
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
I want to fix this menu bar at the top of the page, so that when user scrolls down, the menu bar continues to appear and the content flows into it. I tried everything, some help would be nice.
Heres the CSS and below the HTML:
CSS: https://www.dropbox.com/s/a0z0eov71wvha1c/style.css
HTML: https://www.dropbox.com/s/qyvb0oqhx8550ym/html.txt
Thank you!
Use the position: fixed css property. Then the position of the div is relative to the window's viewport rather than the content of the page.
You spelled position in #navigation wrong in your stylesheet, could that be the problem?
This is really easy if you correctly understand how the position attribute works in css.
I have a demo which should help you. You just need to understand how position:fixed is used to make the menu bar stick to top.
http://codepen.io/anon/pen/mvGqf
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).
My site uses wordpress. I have a right header as seen here http://www.gigster.me and a top centered drop down menu as a plugin for buddypress links. This renders the links on the top right un-clickable. I tried changing the z-index properties of the center tab but it's still not working. The drop down menu is causing the usable area to the right and left of the actual tab/menu to be visible but unusable.
I'm not a coder so i appreciate any help for amateurs like me.
thank you
Ziad
A few options:
Set the login section to display: relative; and that would push the rest of the page down.
Decrease it's z-index and when it loads, set display: none; for .header_right
Decrease the login screen's z-index, but increase it when it's dropped down.