![[HSX] HeadShot Xtreme is officially recognized by the Central Outpost as a genuine gaming organization.](https://www.headshotdomain.net/files/coRpSE/cnopseal_X74-MEW1.png "[HSX] HeadShot Xtreme is officially recognized by the Central Outpost as a genuine gaming organization.")
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:
To add to your site,
OPEN: public_html/themes/LM-BlackMagic/theme.php
FIND:
REPLACE:
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:
BEFORE, ADD:
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:
ON NEW LIN, AFTER, ADD:
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.
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.
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.
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;.
Hmm maybe the CSS cache has not reset yet. 
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.