Jump to content

Need help fixing my HTML code.

Queasy Tiger
 Share
Go to solution Solved by mariushm,

Well, it's not exactly great, or as simple as it could be, but here's my try at it

 

 

Website.zip

Posted (edited)

Please help!

Okay, so I'm a newbie to HTML and CSS.
I'm in a bit of a pickle about my code.
Here it is: 

<!DOCTYPE html>
<html>

<!--Head-->

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<!--Body-->

<body>

    <!--Background Colour-->

    <body style="background-color:#323232;">

        <!--Menu Bar-->
        <div class="header">
            <img src="img/logo.png" alt="Red Fox IT logo" height="50" width="50">
            <a href="index.html" class="logo">Red Fox IT</a>
            <div class="header-right">
                <a class="active" href="index.html">Home</a>
                <a href="sites.html">Our sites</a>
                <a href="resources.html">Resources</a>
                <a href="services.html">Services</a>
                <a href="team.html">The Team</a>
                <a href="contact.html">Contact</a>
                <a href="about.html">About</a>
                <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                    <i class="fa fa-bars"></i>
                </a>
            </div>

        </div>

        <script>
            function myFunction() {
                var x = document.getElementById("header a");
                if (x.className === "header") {
                    x.className += " responsive";
                } else {
                    x.className = "header";
                }
            }
        </script>

        <!--Text-->
        <div style="padding-left:20px">
            <h1>Welcome to Red Fox IT</h1>
            <p>Lorem ipsum</p>
        </div>

    </body>

</html>

So, here is my problem

As you can see, I've tried to make it responsive, but the little menu bars at the top right don't disappear when on desktop, or reveal the menu items when on mobile!
And the active menu item stays there no matter what!
I need them all to be hidden on mobile, and to be revealed when tapping the bars including the active item.
I also want the menu bars to disappear when on desktop, replaced by the normal menu items.

1689338726_Screenshot2019-11-06at20_36_52.png.315cdde13041dd71c19bcfce6c76a746.png1004128420_Screenshot2019-11-06at20_37_16.png.f369b97a23c346741964f38bd41ebc2e.png

I have included the index.html and stylesheet Website.zip for you to have a look at, should you wish to give me a hand. (Website.zip)

I get that Stackoverflow might be better for this, but I thought I'd try my favourite forum first.
Also, apologies if it's something obvious.  Like I say, I'm still new to this.

Thanks all!

 

Edit:
The text at the top right "Red Fox IT" also responds to being hovered over.  I'd also like this to be gone too, if at all possible.

 

 

Edited by Queasy Tiger
To add ammendment
Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programs, Apps and Websites

×