I have a website at:
I am attempting to shift the menu so that the links appear on the right side of the window instead of the left side.
I have experimented with various text-align: right; properties, but none of them seem to be effective.
I was able to successfully make the menu stick to the top while scrolling, but this caused the menu links to shift from the center position to behind the logo.
Below is the HTML code snippet:
<div id="head" class="sticky">
<div id="bar">
<div id="menu" class="sticky">
<div class="link"><a class="nav-link js-scroll-trigger" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e192989295848ca18c98993a540ceca9">[email protected]</a>">Contact</a></div>
<div class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/">System</a></div>
<div class="link"><a class="nav-link js-scroll-trigger" href="http://wiki.myrkur.net">Wiki</a></div>
<div class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/addalbum.php">Add album</a></div>
</div>
<div id="logo" class="sticky">
<a href="http://www.myrkur.net"><img src="oldie/img/myrkur-logo.jpg" /></a>
</div>
</div>
</div>
myrkur.net
Here is the corresponding CSS:
#head {
background-color:#5F5F5F;
height:40px;
position: fixed;
z-index: 9999;
width: 100%;
}
#menu{
display: block;
margin: 0 auto;
text-align: right;
width:100%;
height:25px;
background-color:#5F5F5F;
position: sticky;
top: 0;
padding: 5px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: right;
-moz-box-align: right;
box-align: right;
-webkit-box-pack: right;
-moz-box-pack: right;
box-pack: right;
}
#menu .link a{
float:right;
padding:4px;
display:block;
margin-left:auto;
margin-right:10px;
text-decoration:none;
-webkit-border-radius:0px;
-moz-border-radius:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#aaaaaa;
font-weight:bold;
text-shadow:1px 1px 1px #000;
}
#menu .link a:hover{
background-color:#5F5F5F;
text-shadow:1px 1px 1px #000;
border-bottom:solid;
border-width:1px;
border-color:#5F5F5F;
}
#bar {
width:100%;
height: 10px;
margin: 0px auto;
padding:0px;
padding-top:12px;
padding-left:75px;
text-align:right;
position:sticky;
}
#logo {
position:absolute;
top:3px;
left:65px;
}
#head h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #FAFAFA;
background-color: #90897a;
padding:5px 15px;
margin:0px
}
#head p {
padding:5px;
margin:0px;
}
CSS