Horizontal menu bar header

NiallM1974 · May 12, 2021

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:

<!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:

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

BigDady · May 13, 2021

If you wanted the menu on one line then either the width is too small or the characters are too large. Personally, in modern times a width of 875px is far too narrow not to mention that this is not responsive design. But here is my CSS for your HTML:

Code:

//lower case b
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;
}
li {
    float: left;
    font-size: x-small;  // moved from the body rule and changed to a smaller size
}
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;
}

// Changed
#navigation li:not:)first-child):before {
    content: "|";
}

c1lonewolf · Jun 6, 2021

1. It would probably work better if you actually placed the menu within the body element of the document instead of placing it between the head and body.

2. <div id ="navigation"> the equal sign should follow directly after the attribute name <div id="navigation">.

3. You don't need two wrappers for a navigation menu unless you just want them, change <div class="navigation-menu"><div id="navigation">...</div></div> to <div class="navigation">...</div>. This allows you to use the same type of navigation menu in different places. creating a default styled menu.

4. In your stylesheet identify it like this, div.navigation. If you place a menu in both the pager header and footer you access them like this, #header .navigation{} and #footer .navigation{}
two menus styled differently using the same starting base.

Not sure why drop-down is not working.	2	Mar 24, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Need help with code on website (noob)	2	Jul 18, 2022
I need help fixing my website	2	Oct 15, 2023
Buttons lining up	1	Feb 6, 2022
Align img inside nav tabs section	5	Dec 29, 2023
Justify-content not working	1	Mar 29, 2021
Is it possible an iframe can overlapp another?	3	Apr 20, 2022

Horizontal menu bar header

NiallM1974

Attachments

BigDady

c1lonewolf

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads