How to prevent transition elements from transitioning every time the browser refresh or open the web page for the first time?

Question

I have two problems.

I am currently designing a mobile website. For the navigation, I decided to use a hamburger approach to links. I am trying to transition the hamburger into an X when you tap on the hamburger using the property transform when the input element is checked. The problem is that when you open the web page for the first time or refresh the browser, the transition elements transition without clicking or taping on hamburger. Is there anyway to fix that.

The second problem occurs if you're view the web-page on Microsoft Edge. In Microsoft Edge, the title "White Bact" is display on two lines. I want the title to be displayed only one line. If you were to view it on Google Chrome, the title is on one line. I designed and tested everything on google chrome. I wanted to be same on every browser.

I have created a link for anyone to download the files from google drive. The files are in a zipped folder, so you would have to extract the files. I wanted to do a JSFiddle, but the problems won't occur.

The main files you should look are the index.css and index.html.

https://drive.google.com/file/d/11N6l8OwcO_waeHcvfdWJyeFgw3O8zE4w/view?usp=sharing

Answer 1

For the first problem, does that you don't want the transition of the hamburger when the page opening? Then I think you can only use the transition when the hamburger clicked:

span.ham:nth-of-type(2) {
    /*transition: transform 500ms cubic-bezier(0.01, 0.24, 0.28, 1.35);*/
}

...

/* if the hamburger is clicked */
#hamburger:checked ~ label > span.ham:nth-of-type(2) {
    transform: scale(0);
    transition: transform 500ms cubic-bezier(0.01, 0.24, 0.28, 1.35);
}

For the second problem, the "White Bact" will display on one line on Edge if you remove width: 180px; in .logo > h1 > a:

.logo > h1 > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /*width: 180px;*/
    text-align: center;
}