The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Which .css file is controlling my menu?
larry78723
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
larry78723
post Jun 3 2020, 06:38 PM
Post #3


Member
***

Group: Members
Posts: 39
Joined: 5-March 20
Member No.: 27,220



QUOTE(CharlesEF @ Jun 3 2020, 06:22 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 3 2020, 09:12 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 4 2020, 04:38 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(larry78723 @ Jun 3 2020, 09:59 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
larry78723
post Jun 4 2020, 05:37 AM
Post #6


Member
***

Group: Members
Posts: 39
Joined: 5-March 20
Member No.: 27,220



QUOTE(pandy @ Jun 3 2020, 10:12 PM) *

What black background? I don't see any black background. Is it supposed to be behind the menu?


If you scroll down it appears.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2020, 09:11 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Not that I can see. WHERE is it supposed to be?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
larry78723
post Jun 4 2020, 10:08 AM
Post #8


Member
***

Group: Members
Posts: 39
Joined: 5-March 20
Member No.: 27,220



QUOTE(pandy @ Jun 4 2020, 10:11 AM) *

Not that I can see. WHERE is it supposed to be?


Fixed by adding bg-dark after navbar-dark in:

CODE
<nav class="navbar navbar-expand-md navbar-dark navbar-custom fixed-top">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 4 2020, 12:09 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 5 2020, 12:32 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:50 PM