Hello
Is it possible to lock the main menu and the background image so that when scrolling down the blog and pages, the menu and background image stay visible and in the same position at all times?
And of course how? ;)
Best,
Martin
fixed position - main menu and background image
26 posts from 8 voices- Started 1 year ago by areaofinterest
- Latest reply from praecurvo
- This topic is closed
- This topic is not a support question
-
Is it possible to fix the position of the background gallery so that it won't overlap with the menu when the browser window isn't full size? Ideally it would be great if a horizontal scroll bar could be used to navigate the site when the window isn't full size, instead of all of the content overlapping.
Posted 1 year ago # -
EDIT:
I tried adding this to my custom.css but no luck. Any other ideas?avia_fullscreen_slider canvas{
display: block;
position: fixed;
top:0;
left:0;
z-index: 1;
}Posted 1 year ago # -
jorisvh
MemberI position fixed my sidebar with a margin and padding of 0 so my sidebar is on the upper left of my screen. This is what I want. But when I go to a page with a content block and a slideshow fullscreen behind it, my sidebar goes to the right with 50px. Why is that and how can change it so my sidebar is always at the left of the screen.
Thanks
Posted 1 year ago # -
areaofinterest
MemberIn your Wordpress dashboard > Flashlight > Styling at the buttom you can enter the .css code (simply copy/paste into it). If you want more control and overview you must download the custom.css file with the help from a ftp-client (i.e. filezilla). Ftp-clients makes it possible to manage your files on the server (host). When downloaded you can see the code in a simple texteditor or in a programme as adobe's dreamviewer. Here you can add, edit and change the custom.css which represents all aestethics of your webpage. When changed, you need to save the file with the same name (custom.css) and replace the old custom.css on the server with the new one you just edited.
This is the best I can do. Remember to always backup your custom.css files. Good luck!
Posted 1 year ago # -
Hey,
I didn't respond earlier because the solution(s) provided are all valid.
All styling can be added to your Quick CSS in your control panel OR you can add it to your css/custom.css file which you'll need to access through the FTP and then overwrite it with your modified version. Adding things to your Quick CSS has the same effect as adding it to the custom.css.Posted 1 year ago # -
Thanks for the clarification. The quick CSS edits did something, but still not locking the menu. Without the edits, the menu will scroll up or down depending on the photo that is in the slideshow. I would really like a locked menu. When I place either of the two above edits into the quick CSS edit, the menus gets entirely screwy. It will move to the right sometimes, or center depending on which page I select and how far I scroll down on each page. I truly do not have the confidence to download my custom CSS from a ftp client like "areaofintere" mentioned. Is there another fix for this issue? One more thing, I also reset me entire browsing history on Chrome.
TY
aaronPosted 1 year ago # -
jorisvh
MemberHello,
I still got a strange problem. I made a container div to center the site. The sidebar was 50px to the right so I fixed that with:
.sidebar{
position: fixed;
left: -50px !important;
}But it only works with a single background with no-repeat. When I use a fullscreen slideshow the sidebar flips. I have no idea why and I must fixe this for a client.
http://woonmodule.nl/test/Good.jpg
http://woonmodule.nl/test/Not_good.jpgWho can help me out! Thanks a lot!
Posted 1 year ago # -
Dude,
It seems we have another issue. On a smartphone or smaller screen when using the "fixed" menu position code from above, viewing the lower half of the menu is not possible. Also, on my macbook pro 15 due to the screen size the "f" and "t" icons can't be seen unless there is a page selected with more content to scroll down with. I have deleted the "fixed" code and I would like a code that would allow scrolling of the menu regardless of the amount of content on a page. This would allow smaller screens the ability to scroll to see the lower portions of the menu as well. Additionally, when the slideshow is moving in the background, it has different effects on the menu's position. One picture will allow a scroll down on the page and the next will place the menu in the fixed position...FYI. If you would like to suggest a solution as well I would be interested.
Thanks again,
aaronPosted 1 year ago # -
Thank you Dude,
This fix doesn't solve the issue on a smaller screen like a smartphone or a laptop. On the smartphone, when zoomed in, the menu is in the way of content. To be quite honest, it's actually great in stock form but I would like to menu to stay scrolled up when the background slideshow is running. As I said earlier, every other slideshow image will fix the menu position and the other will let it go. That's the fix I'm looking for.
aaron
Posted 1 year ago # -
Dude, Chris, Kriesi,
Please take a look at my website http://www.inseeds.com and select the "questions" or any other longer page menu tab. Scroll down to the bottom of the page and change to the next image with the image scroll at the bottom and watch the menu bounce up and down with each image. If I lock the menu with the provided code, then when on a smaller resolution screen, the bottom menu selections can not be seen nor selected.
Simply, a menu that is not locked consistently would resolve my problem. Ideally, I would like a menu that scrolls up and down to see every selection and then stops at the top or bottom of itself while letting the pages continue scrolling.
Also, it doesn't seem like this theme is very smartphone friendly so perhaps I could use one of your simple smartphone themes. Is there a way to have a default mobile theme load while on a smartphone?
Posted 1 year ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
