Which .css file is controlling my menu? |
Which .css file is controlling my menu? |
larry78723 |
Jun 3 2020, 02:59 PM
Post
#1
|
Member Group: Members Posts: 39 Joined: 5-March 20 Member No.: 27,220 |
I have links to both bootstrap.css and styles.css in the header of my page. I'm using navbar for my menu and both css files have entries for it. Bootstrap.css is the first link followed by styles.css. What I'm trying to accomplish is having the black background always be present, not just after I scroll down a line. Which .css should I look in for the setting? An example of what I'm talking about: My Webpage
|
CharlesEF |
Jun 3 2020, 05:22 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
Change the loading order and find out. If you're loading styles.css first then load bootstrap.css 1st and styles.css 2nd. The last loaded file will over write/combine any css rules loaded first.
|
larry78723 |
Jun 3 2020, 06:38 PM
Post
#3
|
Member Group: Members Posts: 39 Joined: 5-March 20 Member No.: 27,220 |
Change the loading order and find out. If you're loading styles.css first then load bootstrap.css 1st and styles.css 2nd. The last loaded file will over write/combine any css rules loaded first. Makes no difference in how the menu loads. I still need to scroll down 1 line to get the black background to appear on the menu. This post has been edited by larry78723: Jun 3 2020, 06:39 PM |
pandy |
Jun 3 2020, 09:12 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
What black background? I don't see any black background. Is it supposed to be behind the menu?
|
Christian J |
Jun 4 2020, 04:38 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Which .css should I look in for the setting? A general tip is to use the browser's developer tools (right click on the part of the web page you want to examine and choose Inspect). These tools should not only indicate which CSS rules that are applied for each HTML element, but also in which CSS file the rule exists. |
larry78723 |
Jun 4 2020, 05:37 AM
Post
#6
|
Member Group: Members Posts: 39 Joined: 5-March 20 Member No.: 27,220 |
|
pandy |
Jun 4 2020, 09:11 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Not that I can see. WHERE is it supposed to be?
|
larry78723 |
Jun 4 2020, 10:08 AM
Post
#8
|
Member Group: Members Posts: 39 Joined: 5-March 20 Member No.: 27,220 |
|
pandy |
Jun 4 2020, 12:09 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, since it's obviously a secret, I can but guess it's the blue bar that now appears behind the top nav if I scroll a bit you are talking about.
It's this rule in styles.css that makes the background transparent. CODE @media (min-width: 768px) .navbar-custom { padding: 2.125rem 1.5rem 2.125rem 2rem; box-shadow: none; background: transparent; } |
pandy |
Jun 5 2020, 12:32 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If you remove the background: transparent bit and change the top padding to .4rem, I think it will work as you want.
I found the right amount of padding by trial and error. Somewhere, somehow the padding is changed when the page is scrolled. Probably JS is involved. There are too many classes and too many scripts to skim through. CODE @media (min-width: 768px) .navbar-custom { padding: .4rem 1.5rem 2.125rem 2rem; box-shadow: none; } |
Lo-Fi Version | Time is now: 24th April 2024 - 06:39 PM |