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

    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

    #62517

    Background is already fixed

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

    .sidebar {position:fixed !important;}

    #62518

    Thanks a million!

    #62519

    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?

    #62520

    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

    #62521

    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.

    #62522

    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;

    }

    #62523

    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.

    Thanks

    #62524

    .sidebar {position:fixed !important;}

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

    #62525

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

    aaron

    #62526

    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!

    #62527

    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.

    #62528

    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.

    http://www.inseeds.com

    TY

    aaron

    #62529

    Try to add following code to the quick css field:

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

    #62530

    Dude,

    How did you do that? Great work!

    Thank you,

    Aaron

    #62531

    Hello,

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

    Who can help me out! Thanks a lot!

    #62532

    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.

    #62533

    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,

    aaron

    #62534

    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.

    ?

    aaron

    #62535

    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?

    #62536

    Anybody….? Help?

    #62537

    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;
    }

    #62538

    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

    #62539

    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!

    aaron

    #62540

    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?

    #62541

    bump

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

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