Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Which .css file is controlling my menu?

Posted by: larry78723 Jun 3 2020, 02:59 PM

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: https://foxclone.com

Posted by: CharlesEF Jun 3 2020, 05: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.

Posted by: larry78723 Jun 3 2020, 06:38 PM

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.

Posted by: pandy Jun 3 2020, 09:12 PM

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

Posted by: Christian J Jun 4 2020, 04:38 AM

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.

Posted by: larry78723 Jun 4 2020, 05:37 AM

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.

Posted by: pandy Jun 4 2020, 09:11 AM

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

Posted by: larry78723 Jun 4 2020, 10:08 AM

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

Posted by: pandy Jun 4 2020, 12:09 PM

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;
}

Posted by: pandy Jun 5 2020, 12:32 PM

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;
}