Horizontal menu bar header


Joined
May 12, 2021
Messages
7
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: 22
  • horizontal-menu-bar.jpg
    horizontal-menu-bar.jpg
    33.9 KB · Views: 19
Ad

Advertisements

Joined
Nov 13, 2020
Messages
72
Reaction score
13
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
19
Reaction score
1
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