Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Horizontyal menu bar header!

NiallM1974

NiallM1974

Active Coder
Hi Guys,

I am designing a website and I want to need a horizontal menu bar header that is identical to the wix header. I attach screenshots of each menu header.

Here's the code for my Home.htm page:

HTML: 
<!DOCTYPE html>

<html>

<head>

<title>SRTC Member's Area!</title>


<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css\stylemain.css">

</head>

<div class="navigation-menu">

<div id ="navigation">

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#bullish">Most Bullish Shares</a></li>

<li><a href="#bearish">Most Bearish Shares</a></li>

<li><a href="#irish">Irish Shares</a></li>

<li><a href="#uk">UK Shares</a></li>

<li><a href="#euro">Euro Shares</a></li>

<li><a href="#us">US Shares</a></li>

<li><a href="#trading">Trading Room</a></li>

<li><a href="#market">Market Topics</a></li>

</ul>

</div>

</div>

<body>


</body>

</html>

And here's the CSS code for my stylemain.css page:

CSS: 
Body {

font-family: 'arial narrow';

background: url(/srtc-graphs.jpg);

margin: 0;

padding: 0;

width: 875px;

}

.navigation-menu ul {

padding: 0px;

margin: 0px;


}

ul {

padding: 0;

overflow: hidden;

background-color: white;

font-size: 10px;

}


li {

float: left;

}


li a {

display: inline-block;

color: black;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}


li a:hover {

background-color: none;

}


#navigation ul

{

font-size: 1.4em;

}


#navigation ul li

{

display: inline;

color:black;

}

#navigation li:not:)first-child):before {

content: " | ";

}


Can you help me with my coding?

Niall
 

Attachments

  • Wix-header.jpg
    Wix-header.jpg
    41.3 KB · Views: 4
  • horizontal-menu-bar.jpg
    horizontal-menu-bar.jpg
    33.9 KB · Views: 4
Last edited by a moderator:
Sort by date Sort by votes
This is what I can get -
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SRTC Member's Area!</title>
    <link rel="stylesheet" type="text/css" href="css\stylemain.css">
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        
        #navigation {
            display: flex;
            align-items: center;
            border-bottom: 3px solid #093F7C;
        }
        
        .logo {
            width: 205px;
            display: flex;
            justify-content: center;
        }
        .logo img {
            height: 58px;
        }
        
        #navigation ul {
            margin: 10px 0;
            display: flex;   
        }
        
        #navigation li {
            margin: 20px 0;
        }
        
        #navigation a {
            margin: 20px 0;
            padding: 20px;
            font-family: Arial;
            font-size: 13px;
            font-weight: bold;
            color: #151F3E;
        }
        
        .line {
            border-right: 1px solid #D8BDE2;
        }
    </style>
</head>

<body>
    <div class="navigation-menu">
        <div id ="navigation">
            <div class="logo">
                <img src="logo.jpg">
            </div>
            <ul>
                <li><a href="#home" class="line">Home</a></li>
                <li><a href="#bullish" class="line">Itroduction</a></li>
                <li><a href="#bearish" class="line">Disclaimer</a></li>
                <li><a href="#irish" class="line">Technical Analysis</a></li>
                <li><a href="#uk" class="line">Videos</a></li>
                <li><a href="#euro" class="line">Member's Area</a></li>
                <li><a href="#market">Market Topics</a></li>
            </ul>
        </div>
    </div>
</body>
    
</html>

Image is here -
 
Upvote 0 Downvote
Here is your navbar. You can change it as you want -

css -
CSS: 
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

#navigation {
    display: flex;
    align-items: center;
    border-bottom: 3px solid #093F7C;
}

.logo {
    width: 150px;
    display: flex;
    justify-content: center;
}
.logo img {
    height: 58px;
}

#navigation ul {
    margin: 8px 0;
    display: flex;   
}

#navigation li {
    margin: 20px 0;
}

#navigation a {
    margin: 20px 0;
    padding: 15px;
    font-family: 'Open Sans Condensed';
    font-size: 14px;
    font-weight: bold;
    color: #151F3E;
}

.line {
    border-right: 1px solid #D8BDE2;
}

#navigation > p > a {
    margin: 0 40px;
    padding: 0;
    font-size: 12px;
}

html -
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SRTC Member's Area!</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="navigation-menu">
        <div id ="navigation">
            <!-- Logo -->
            <div class="logo">
                <img src="logo.jpg">
            </div>
            <!-- Navbar -->
            <ul>
                <li><a href="#home" class="line">Home</a></li>
                <li><a href="#bullish" class="line">Most Bullish Shares</a></li>
                <li><a href="#bearish" class="line">Most Bearish Shares</a></li>
                <li><a href="#irish" class="line">Irish Shares</a></li>
                <li><a href="#uk" class="line">UK Shares</a></li>
                <li><a href="#euro" class="line">Euro Shares</a></li>
                <li><a href="#market" class="line">US Shares</a></li>
                <li><a href="#trading" class="line">Trading Room</a></li>
                <li><a href="#market">Market Topics</a></li>
            </ul>
            <!-- Mail -->
            <p><a href="mailto:[email protected]">[email protected]</a></p>
        </div>
    </div>
</body>
    
</html>
 

Attachments

  • SextonNavbar.jpg
    SextonNavbar.jpg
    32.2 KB · Views: 2
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom