Sticky Navigation for Sparkling WordPress theme

Sparkling
1

Hi,

First of all, THANKS for creating beautiful and useful themes for free.

I am using Sparkling theme, may I know how to make the navigation stick/fixed at top when scroll down like https://colorlib.com/? Thanks

2

To create fixed/sticky menu:

Open header.phpvia WordPress dashboard or FTP clients such as FileZilla and replace

<nav class="navbar navbar-default" role="navigation">

with

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

These changes can be done via Child Theme as well. Simply copy/paste header.php file to Child Theme root folder and edit it there.

Now you will see that part of content area will be hidden behind menu because menu is taken out and added on the top of it. This can be fixed by moving content area slightly down by adding this to Theme Options – Other – Custom CSS

.top-section,
#content {
    margin-top: 47px;
}
.admin-bar .navbar-fixed-top {
padding-top:32px; 
}

Second part of this code will move navigation down when you are logged-in in your WordPress dashboard. If you won’t add that part of code it won’t be a big deal as you are going to be the only one to see this “problem”.

You can also tweak pixel values to get the results you were looking for as thi is just a general idea on how it should look.

3

Thanks, Your solution is good enough for me as you did a great job on utilizing the theme.

Cheers!

4

Hi, I found that in case the page having sidebar / widget, we have to add in .widget-area { margin-top:(same height with "#content")px} or else both content area and side bar will display different height.

Now my code is

.top-section, #content {
	margin-top: 35px;
}
.admin-bar .navbar-fixed-top {
	padding-top:32px;
}
.widget-area {
	margin-top:35px
}
5

Thank you for pointing that out! :wink:

6

Hi, using Sparkling version V.1.7.5 with child theme.

I removed


  1. .top-section{margin-top:35px;} as I found it will create space between slider and navigation bar.

  2. .widget-area {margin-top:35px;} was removed as it will make the widget area align lower than main content

7

Hi
How about keeping homepage customization only and keep a top margin for posts and pages?
www.maquelia.com

I tried with the following but didn’t work:

.page .top-section,
#content {
    margin-top: 50px;
}
.home  .page .top-section,
#content {
    margin-top: 0px;
}
8

(…while I am running beta nightly builds, that shouldn’t make a difference for this question)
Here’s what’s happening on my end http://prntscr.com/79zae6 of bradgriffin.me

I jiggled with a few different settings, but I can’t seem to find where to push the content down a bit more. Can anyone else see it?

9

@Brad

Add this code to Theme Options >> Other >> Custom CSS. It should fix problems with content alignment after creating sticky navigation.

.main-content-area {
  margin-top: 72px;
}
.widget-area {
  margin-top: 0;
}
10

First: THANK YOU!!!
Second: Why in the world can’t I find the right class to bring the main content down so that it lines up with the widget?
I feel like a goon b/c I’ve entered about a bazillion classes and none of them seem to budge that main content side

11

Hi Guys,

Is there a way we can centre the sparkling top nav menu instead of having it left or right? I’ve tried lots of different code but can’t figure it out.

Thanks for the help and for the sick theme.

Dane

12

@Brad

I think that you have already managed to do that and now have created a huge margin above your main content area. If you still need any help, please let me know.

@danebergman

We can continue our discussion here.

13

I’ve tried this and partially worked. It keeps hiding the wp admin navigation and want to know if there’s a way to only show this menu when scroll down?

Thanks a lot!

14

after make sticky navbar, i want to make animated navbar Resize On Scroll like this callmenick.com/_development/resize-header-on-scroll/ …but i frustated with which file i must edit, can anyone help me?

15

@underdom

This thread is outdated and it is already marked as resolved. Please start your own thread and we will look into it.

Sorry for inconvenience.