Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
  • #8809


    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? ;)




    Background is already fixed

    To fix the position of the navigation menu add the following to your custom css

    .sidebar {position:fixed !important;}


    Thanks a million!


    It actually messes with the position of the menu. It moves allt the way to the left of the screen. And now the shop plugin does not fit to the menu any longer..

    How do I adjust these things? Or is there a smarter way to fixate the menu?


    If you could share a link to your site that would be helpful

    .sidebar {position:fixed !important;width:220px; left:50px;}

    this will fix the position, set the width to 22px and leave a gap of 50px between the left edge of the browser window and the sidebar


    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.



    I tried adding this to my custom.css but no luck. Any other ideas?

    avia_fullscreen_slider canvas{

    display: block;

    position: fixed;



    z-index: 1;



    I 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.



    .sidebar {position:fixed !important;}

    this works for me! remember to clear your browser cache or the result might not show instantly.


    I am so confused on how to edit my custom css. Can someone please explain?



    In 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!



    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.


    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.




    Try to add following code to the quick css field:

    .sidebar.sidebar_absolute {
    left: 50px !important;
    position: fixed !important;



    How did you do that? Great work!

    Thank you,




    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:


    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.

    Who can help me out! Thanks a lot!


    Did you try 0px instead of 50px? The standard value is left: 50px – this pushes the sidebar 50px to the right. However if you use -50px the sidebar will move 100px to the left instead of just 50px.



    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,



    I’d like to add as a possible solution. Can I have all of the menus automatically re-size more according to the screen space being used.




    Dude, I added this style per your advise

    .sidebar.sidebar_absolute {

    left: 50px !important;

    position: fixed !important;


    Menu sidebar works great, but now right side bar with Calendar hides behind the left sidebar, could you help please?


    Anybody….? Help?


    Try to use following code:

    .sidebar.sidebar1.sidebar_absolute {
    left: 50px !important;
    position: fixed !important;

    instead of:

    .sidebar.sidebar_absolute {
    left: 50px !important;
    position: fixed !important;


    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.



    Do you know, but if I could only scroll the main menu to it’s top and bottom (from the logo to the social media buttons) and have it locked within those parameters, that would be Golden!



    Dude, Chris, Kriesi,

    Please take a look at my website 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?



Viewing 26 posts - 1 through 26 (of 26 total)

The topic ‘fixed position – main menu and background image’ is closed to new replies.