Nav bar transparency issue

Shapely
1

Hi!
first of all let me congratulate you for this theme! I have used it in my website and I couldn’t be happier.

  • I have followed the instructions that I have found in this same page about how to make the nav bar transparent on top and colored once you start scrolling, and I have found a bug that I don’t know how to solve. Sometimes, if you scroll down, or if the website loads in the middle of the page (beause you visited it before), the nav bar will remain transparent even though it is in the middle of the pageExample. Do you know how this could be fixed?

  • Also, I wanted to ask you if it would be possible to make the transition between transparent and color a little bit more smooth, without disappearing completely.

  • Finally, I was wondering how it would be possible to eliminate the thin line at the bottom of the nav bar that is visible when it is transparent.

Thank you so much!

This is the code I’m using:

nav#site-navigation{
  background: transparent;
}
header#masthead {
    top: 0;
    width: 100%;
    z-index: 999;
    left: 0;
    position: fixed;
    right: 0;
}
nav#site-navigation.main-navigation.fixed {
  background: #fff;
}
2

Hi @navajo99,

I hope you are well today and thank you for your questions.

– I have followed the instructions that I have found in this same page about how to make the nav bar transparent on top and colored once you start scrolling, and I have found a bug that I don’t know how to solve. Sometimes, if you scroll down, or if the website loads in the middle of the page (beause you visited it before), the nav bar will remain transparent even though it is in the middle of the pageExample. Do you know how this could be fixed?

It seems the known issue as reported here The sticky header does not track down the page when you link to page elements using href #Element-ID · Issue #14 · ColorlibHQ/shapely · GitHub and to resolve it could you please try using latest version of theme by downloading it from the below page?

– Also, I wanted to ask you if it would be possible to make the transition between transparent and color a little bit more smooth, without disappearing completely.

– Finally, I was wondering how it would be possible to eliminate the thin line at the bottom of the nav bar that is visible when it is transparent.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

nav#site-navigation {
    border-bottom: 0;
    background: transparent;
}

Best Regards,
Movin

3

Thank you for your reply!

I updated the theme as you suggested from github (although the theme I was using already was the latest version), and it didn’t solve the transparency problem when scrolling down. Any idea?

As a matter of a fact, I have realize there are other problems with the menu bar I couldn’t see because I hadn’t added a menu yet. You can see it in this page.

  • In a tablet size screen, the menu appears in a vertical way, outside of the top bar (if you resize the window of your browser a bit you will see what I mean).

  • But actually, if you continue making the screen smaller, the menu completely disappears, the three lines that should appear to show the menu are not there, and the top bar becomes larger without any reason.

Thank you so much for your help!

4
I updated the theme as you suggested from github (although the theme I was using already was the latest version), and it didn’t solve the transparency problem when scrolling down. Any idea?

To resolve the issue try using the below custom CSS code.

nav#site-navigation.main-navigation.scrolled {
    background: #212121;
}
As a matter of a fact, I have realize there are other problems with the menu bar I couldn’t see because I hadn’t added a menu yet. You can see it in this page.

– In a tablet size screen, the menu appears in a vertical way, outside of the top bar (if you resize the window of your browser a bit you will see what I mean).

– But actually, if you continue making the screen smaller, the menu completely disappears, the three lines that should appear to show the menu are not there, and the top bar becomes larger without any reason.

I have tested it on my test site and it’s working fine for me using latest version of Shapely theme.

This can be child theme issue on your site so to confirm it just temporary use the Shapely theme instead of child theme on your site. If everything works fine then it’s your child theme issue so just share me your child theme so that i can troubleshoot it.

5

Hi!

  • so I checked my custom CSS section and I already had that code in the section. This is how the custom CSS looks:
nav#site-navigation {
    border-bottom: 0;
    background: transparent;
}
header#masthead {
    top: 0;
    width: 100%;
    z-index: 999;
    left: 0;
    position: fixed;
    right: 0;
}
nav#site-navigation.main-navigation.fixed {
    background: #212121;
}
  • And regarding the rest of the errors, they happen both in the child theme and in the parent theme. I am 60% sure the problems are bootstrap problems, but I don’t know how to solve that.
6
– so I checked my custom CSS section and I already had that code in the section. This is how the custom CSS looks:

Actually we need scrolled in place of fixed in the above code.

– And regarding the rest of the errors, they happen both in the child theme and in the parent theme. I am 60% sure the problems are bootstrap problems, but I don’t know how to solve that.

I have tested it on my test site and it’s working fine for me using latest version of Shapely theme.

Are you having the same issue on shapely demo site here Front Page - Shapely Demo ?

7

So…I have been doing a lot of testing and I know exactly what the problem is.

Problem 1: As it turns out, when the window is smaller than 992px (or 1024px, I am not sure right now), the menu is supposed to hide, and it will only show when you press those three lines on the top right of the screen. But in my case, it was not behaving like that. I solved it already :slight_smile:

Problem 2: In my site the navbar is transparent and the menu font is white. The second problem is that, in a small screen, when the menu is expanded, the background is transparent.

Problem 3: How do I prevent the navbar from resizing into 110px in a small screen?

Problem 4: How do I change the color of the 3 top-right lines??

Anyway, you can check my site here

Thanks!!

8

Regarding your other question, to help us keep support thread separates could you please create new thread for your other questions here https://colorlibsupport.com/c/shapely/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.