Horizontal menu bar header


Joined
May 12, 2021
Messages
3
Reaction score
0
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
 

Attachments

  • Wix-header.jpg
    Wix-header.jpg
    19.9 KB · Views: 12
  • horizontal-menu-bar.jpg
    horizontal-menu-bar.jpg
    33.9 KB · Views: 11
Ad

Advertisements

Joined
Nov 13, 2020
Messages
48
Reaction score
8
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: "|";
}
 
Ad

Advertisements

Joined
Jul 12, 2020
Messages
8
Reaction score
0
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top