Disappearing hamburger

please see

https://forallthetime.com/BI3/index.html

and

https://codepen.io/Pavel_NA/pen/OJqQOoa

ok, in VSCode there is a hamburger that starts at 800px

great, what i want :slight_smile:

at 880px i get the hamburger here

https://codepen.io/Pavel_NA/pen/OJqQOoa

at https://forallthetime.com/BI3/index.html NO HAMBURGER :frowning:

where is my issue???

please

struggling validating my HTML

is that where my trouble is?

yes, i tried figuring this out my self and looking at my code and validating code makes no sense to me :frowning:

i tried figuring out if this has been discussed in another thread. no go

i cant make sense of the results… they simply dont match up

some are around the same lines of code, and looking at them the error mesage makes no sense

can someone help me?

thanks!

In that one you don’t turn on the toggle at all.

You need to turn it on in your 800px max-width:media query.

.toggle {display:block}

I gave you a fully working nav in your other thread so you should work from that,

I suggest that you start again and get the nav correct before moving on to other things and keep the code more structured. Keep the nav code together and then move on to the next element in a structured manner…

You declare things all over the place even globally for elements like p and h1 so you can never find the problem. You should use class names to change elements and not just say p{background:red} or similar as that is a global change and affects them everywhere.

You can define some global properties in your initial rest sheet but only things like making the margin consistent. on some elements such as headings and p tags etc… The styles heet should start with your reset and global characteristics and then start with body styling and work your way logically down the code so its easy to follow. (e.g. Header, main, and footer styles should be placed roughly in hrml source order so you always know where they are. These should be the consistent elements that are used on most pages).

If other pages have some different elements then comment those at the end in an easily identifiable block. Don’t just mix them in with the default main page styles.

1 Like

On that page you have put index.css last in source and so the following rule undoes anything that went before.

.toggle,
[id^="drop"] {
  display: none;
}

The rules in styles.css have been overwritten with that rule.

Why are you duplicating rules in different srylesheets?

Your main stylesheet which should be the first in source should have all the rules for the reset and initial setup and all the rules for the common elements.such as nav, header and footer etc. There is no need to mention them again unless you need to modify them for a page that has a slightly different design. This main styleheet must always be the first in source.

IT WORKS!

.toggle {display:block}

thanks!

thanks!

will do from here on out :slight_smile:

yes, good advice

got it i think… code that can be applied on every page, Header, main, and footer styles, should be in its own style sheet

you know, i suspected that works :slight_smile:

i saw you had a designated section for the media queries… i assume that wher they belong?

no good reason, honestly… i was having trouble getting my index.css transfered to my style.css

bingo… that makes sense :slight_smile:

kindly explain

kindly explain

what does

mean? maybe an example, please

ok, listen… seriously, i know i always thank you when you help me, but i want to tell you again THANK YOU SO MUCH for your time, trouble and PATIENCE

youve been SO good to me!

i am not the sharpest tool in the shed, and thank you for not saying that to me! not calling me stupid or belittling :slight_smile:

i want to be a coder!

and you are helping me become a better coder!

In the head of your document you list your css files such as index.css and styles.css or whatever. The order of those style sheets is important because the styles cascade just like normal rules.

If say in styles.css you override some styles from the previous index.css you can’t then change the order of those files in the html. If you moved the link to the index.css after the styles.css then all your overrides are undone. Which is what you did to your toggle.

It’s common sense when you think about it. :slight_smile:

1 Like

“previous”?

help here

is this what you mean?

<link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="location.css">
  <link rel="stylesheet" href="index.css">

should look like

<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="location.css">
<!-- future .css -->

if not, please clarify :slight_smile:

please explain

need help here too

thanks!

Yes that’s what I’m talking about. :slight_smile:

You can’t change the order of those files. I don’t really see the need for multiple style sheets on a small site anyway but if it suits you better that way it’s ok but keep the order logical and consistent.

I thought I already had :).

I’m on a mobile at the moment but when I get back to my desktop on Sarurday (im travelling al day tomorrow ) I’ll show you where it all goes wrong :).

I just mean that you should group styles together logically as I mentioned before. Start with all the main elements and don’t jump up and down the stylesheet with rules that don’t belong there.

For example you styled the p element globally in different places in the stylesheet. I think one was the margin and another had something else. That’s pointless and confusing :).

If the stylesheet is relatively small then you don’t need a new css file for say your contact page or info page but make sure you group the css for each page together clearly marked with comments in the css. Then don’t go and mix other stuff in there.

It’s all about being consistent and logical.

yes, please

please explain :slight_smile:

Its more or less self explanatory :slight_smile:

/*  Reset and main page elements styles here */

stuff...
stuff...
stuff...


/* Page 2 styles here */

stuff ..
stuff...
stuff...


/* Page 3 styles here */

More stuff ..
etc...

Unfortunately my home computer won’t let me access that site.

Malwarebytes Browser Guard Logo

Website blocked due to phishing

Website Blocked: forallthetime.com

v2.6.20 | Heuristics: phishing

Malwarebytes Browser Guard blocked this page because it may contain malicious activity.

Warning icon

We strongly recommend you do not continue. You may be putting your safety at risk by visiting this site. For more information, visit Malwarebytes Support.

Looking at the css files (as they aren’t blocked by Malawarebytes) the main problem apart from you changing their order is that you seem to be duplicating some rules for no reason. I suggest you go back to one stylesheet and get that right before testing other pages.

.

i have a style.css and index.css and they seem to be working even post FTP

i went to https://forallthetime.com/BI3/index.html saw no warnings of bad things :frowning:

AND i published to a new directory

https://forallthetime.com/BI6/index.html

which is fine too

can this resolve itself?

need i call go daddy (my host and securtity)?

to ask a LARGE favor of you, how, exactly, do i solve the Malawarebytes issue,

please be clear and (maybe) provide the code itself to fix this Malawarebytes problem

i do not see duplicating rules anywhere, in fact i thought i did that proper

PLEASE help!

thanks!

:slight_smile: quote=“OBXjuggler, post:10, topic:438401”]
i have a style.css and index.css
[/quote]

Yes and why do they share about 70% of the same code?

Go through and use just the one css file. In both files style.css and index.css you comment them both as index.css anyway?

Go through line by line and make one logical css file. The two files you have make maintenance a nightmare as you have the exact same styles in both pages so changing one set will not change the other and if you are changing the order of the css files as mentioned before then its not maintainable.

Start again with just the one css file and get that right first.:slight_smile:

You won’t see anything unless you have Malawarebytes installed on your computer. Its a virus detection program.

You probably need to ask your host and also scan your files for any problems. If there are no problems found then it may be a false positive but generally there is some sort of problem when Malwarebytes flags something.

It’s not really my area so would be a question for another forum :slight_smile:

ok i am trying

1 css file. got it!

say style.css (i know it can be anything)

you suggest i go through both (present) style.css AND index.css, get rid of whatever is repeated and THEN use 1 .ccs file to style my index.html

when i add more pages what is your advice? keep the 1 css file and add new css, from the new pages? and you suggest i comment for clarity? i thought i saw the word “comment” from you prior

the key is to have 1 stylesheet, correct?

to use the same code, say for my nav, footer and use classes and ids to where the code is unique to that specific page?

willl do

thanks again!

On a small site where most pages are using the same elements you can get away with one stylesheet. If the site however has hundreds of pages all with completely different css then you will need a different approach.

On a small site the benefit of the one css file is that it is cached straight away and subsequent pages don’t need to load it again.

Yes just add the css to the same file clearly commented and marked up. If however you are adding a page that is completely different to everything else then you can create a new stylesheet for that page. However designs should be consistent so having pages that do not have common elements can be confusing.

sounds good! easier!

words of wisdom!

to save time and trouble, i ask 2 things of you :slight_smile:

is there a way, a method to do this easily? i am looking for the quickest YET accurate way to do this

and

please, tell me exactly where i am duplicating for the first time… this way i can start easier and know i am in the right place :slight_smile:

ok, follow up!

i did it!

took your advice, searched line by line, left no duplicates :slight_smile:

index.css no longer exists

everything looks fine with my 1 stylesheet

please see https://forallthetime.com/BI7/index.html if you can

maybe double check for me, please?

thanks!

Ok I’ll have a look later when I get back to my computer :slight_smile:

Yes that’s much better :slight_smile:

I would keep the box sizing rules together as you put the html part of it down the page and I thought you’d missed it. I would also tidy up the gradient as mentioned in the other thread.

/* generic styles ----------------------------------- */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
  background:transparent;
}
body:before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0 0 0 0;
  background: linear-gradient(
    45deg,
    rgba(153, 176, 233, 1) 35%,
    rgba(0, 151, 255, 1) 72%
  ) no-repeat;
}

I also notice that you still have the drop down menu code in place. That’s fine if you are going to use one but if not then remove it as it is a lot of clutter.