Sticky Navigation for LM-BlackMagic theme

2

Fri May 21, 2021 9:28 pm
Clan Leader
Top Dog
2631 Posts
coRpSE
Online
Most Played:
This week: 81.4hrs.
Total Played: 161hrs.
  
There is life outside of the game.
Here is a small mod for those of you that own Lonestars LM-BlackMagic theme, and like to have the menu stick to the top when you scroll down. Adding it will only take a couple of minutes and is very easy to install. You can see it working here, on my site, so you can get a better understanding on what it is. Just scroll down and look at the top of the site.

If you want to purchase the theme, you can buy it here:
Please login to see this link
Get registered or Log in


To add to your site,
OPEN: public_html/themes/LM-BlackMagic/theme.php

FIND:

Code: [ Select all ]

<nav class="navbar navbar-expand-lg navbar-dark">


REPLACE:

Code: [ Select all ]

<nav id="navbar_top" class="navbar navbar-expand-lg navbar-dark">


SAVE & CLOSE
As you can see, in that file, I only added an id to the file, ( id="navbar_top" ).



OPEN: public_html/themes/LM-BlackMagic/style/menu-js.js

FIND:

Code: [ Select all ]

/*Mobile menu parent click with submenu fix*/


BEFORE, ADD:

Code: [ Select all ]

document.addEventListener("DOMContentLoaded", function(){
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            document.getElementById('navbar_top').classList.add('fixed-top');
            navbar_height = document.querySelector('.navbar').offsetHeight;
            document.body.style.paddingTop = navbar_height + 'px';
        } else {
             document.getElementById('navbar_top').classList.remove('fixed-top');
            document.body.style.paddingTop = '0';
        }
    });
});


SAVE & CLOSE

Now, you will see a bunch of space above that, for the sake of keeping it clean, I would remove some of that space. Me, I only kept 1 empty space between each script.

OPEN: public_html/themes/LM-BlackMagic/style/style.css

FIND:

Code: [ Select all ]

/**
 *   Navigation styling
 */


ON NEW LIN, AFTER, ADD:

Code: [ Select all ]

 .fixed-top {
   top: -40px;
   transform: translateY(40px);
   transition: transform 1s;
   background-image: linear-gradient(to bottom, #292d30, #25282c, #212428, #1e1f23, #1a1b1f);
   border-bottom: 2px inset #111;
 }


SAVE & CLOSE


Of course, you can add animation to it if you want, all within that last file, the style.css. To change the speed of how fast it comes in, just change the (transition: transform 1s;) to something like 2s, which means 2 seconds. Feel free to change it as you please.


Expand
Sat May 22, 2021 7:48 am
Nuke Dev / Coder
63 Posts
Lonestar
Currently Offline
Offline
  
Doesn't like playing games!
Looks good, but imo, I would add a slight border to the bottom of the nav when it becomes sticky, Without the border, makes it hard to see what is nav and what is content. Just a thought.
Sat May 22, 2021 12:14 pm
Original Poster
Clan Leader
Top Dog
2631 Posts
coRpSE
Online
Most Played:
This week: 81.4hrs.
Total Played: 161hrs.
  
There is life outside of the game.
There is a border. Both in the code and on my site. On my site, I have the 1px solid #0F0 and in the script, I have  border-bottom: 2px inset #111;.


 
Sat May 22, 2021 2:30 pm
Nuke Dev / Coder
63 Posts
Lonestar
Currently Offline
Offline
  
Doesn't like playing games!
Hmm maybe the CSS cache has not reset yet. lachen


 
Sat May 22, 2021 3:14 pm
Original Poster
Clan Leader
Top Dog
2631 Posts
coRpSE
Online
Most Played:
This week: 81.4hrs.
Total Played: 161hrs.
  
There is life outside of the game.
Maybe. Yeah, i just verifi9ed on Opera, Chrome, FF, and Edge to make sure it's there. If you're using Chrome, try hitting Ctrl + F5 to do a hard refresh.


 
Sat May 22, 2021 3:30 pm
Nuke Dev / Coder
63 Posts
Lonestar
Currently Offline
Offline
  
Doesn't like playing games!
The browser I was on was FireFox, I have switched default browsers, as FireFox is much better for modifying CSS on the fly.


 
Forums ©