Home Forums Fusion Locking a section, and a couple of other questions

This topic contains 5 replies, has 2 voices, and was last updated by  Joshua 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #47483

    queenlo
    Participant

    Hi Josh,

    I’m almost done tweaking my site and I’ve run into a couple of last little things:

    1. I added some CSS to style my bulleted paragraph text with red bullets and an indentation. It works, but the problem is that EVERYTHING in the whole site that is an <li> item has taken on the red bullets, including the nav links in the overlay menu, the email icon on the Contact page, and even all the Elementor tool buttons in the backend.

    Can you help me find the proper CSS to style JUST the bulleted body text? Here’s what I used in my custom CSS but it doesn’t quite work:

    ul {list-style: none}
    
    body li::before {content: "•"; color: #f25a43;
      display: inline-block; width: 1em;
      margin-left: -1em;}
    body li {margin-left: -1em; padding-bottom: 8px;}

    2. Can I “lock” a section on my home page in Elementor? The top section that you built in the Freelancer demo is really touchy with the layered blocks and if you touch them the wrong way, the pieces go flying all over the place (I still haven’t figured out what happened to the vertical piece of type and I haven’t been able to replace it). I don’t want my client to have trouble wrecking this section once she starts updating the rest of the page herself — is there a way for me to lock down just that section, or save it as a module somewhere else and import it so that it’s only editable in the module itself?

    3. I’m also having some trouble with 1 thing in the overlay menu:

    I want the “About” link to go to the anchored section on the home page, but it’s not calling the anchor to the top of the page, it shows up kind of at the bottom of the page (even though the anchor is at the top of the section). So when you click on “About”, you have to wade through a couple of the sections above it to get to it, rather than looking like a nice clean jump to that section of the page.

    Thank you! I appreciate all your help!

    • This topic was modified 1 week, 1 day ago by  Joshua.
    • This topic was modified 1 week, 1 day ago by  Joshua.
    • This topic was modified 1 week, 1 day ago by  Joshua.
    #47485

    queenlo
    Participant
    This reply has been marked as private.
    #47492

    Joshua
    Keymaster

    1. This forum is really for Fusion related issues only. We offer to help out with some theme related customizations here and there, but if you need help with custom CSS, you should consider hiring a developer. That said, you need to add a class to your styled lists; applying a global style to your ul elements is asking for trouble:

    ul.list-styled {list-style: none}
    
    body li.list-styled::before {content: "•"; color: #f25a43;
      display: inline-block; width: 1em;
      margin-left: -1em;}
    body li.list-styled {margin-left: -1em; padding-bottom: 8px;}

    Then your list would be:

    <ul class="list-styled">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>

    2. Not yet. The feature request is still pending at Elementor – https://github.com/pojome/elementor/issues/1090

    You may want to restrict your client’s privileges or role and preventing access from the entire page.

    3. I think the main issue is all the plugins and slower loading images you have on your page. The page jumps to the anchor instantly, then a bunch of plugin content is loaded after causing the height of the page to change. You could try scrolling to the anchor after the entire page has finished loading. This is starting to push the scope of this forum, but here’s some custom javascript to get you started.

    $(window).load(function () {
        var $_elem = $('#' + $(location).attr('href').split('#')[1]);
        var offset = $_elem.offset();
        $('body, html').delay(500).animate({ opacity: 1, scrollTop: offset.top }, 'fast');
    });

    4. The only way to ensure that the content for your submenu item beneath lines up on all screen sizes is to also set the parent items left. I would also add some padding to prevent them from sitting at the site of the screen.

    .nav-overlay .navbar-nav .nav-link{
        text-align: left;
        padding-left: 3rem;
    }
    #47494

    queenlo
    Participant

    Thanks very much!

    #47495

    queenlo
    Participant

    Hi Josh,

    For #2 above… could I use the Anywhere Elementor functionality for this for now? Would that disturb the page loading or anything?

    #47496

    Joshua
    Keymaster

    That should work okay. The only disadvantage is of course having to edit/view separately under Anywhere Elementor and not being able to edit directly on the page, but I believe that’s what you’re looking for.

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

You must be logged in to reply to this topic.