Having trouble getting the text on the menu to align to the right side

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

htmlcss

Answer №1

Please eliminate the display: box; display: -webkit-box; display: -moz-box; properties from the #menu element.

Answer №2

* {
  margin: 0;
  padding: 0;
}

#head {
  background: #333;
  color: #fff;
  padding: 25px 30px 25px 30px
}

#bar {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}

#logo img {
  width: 10%
}

#menu {
  text-align: right;
}

#menu li {
  list-style-type: none;
  display: inline-block;
  padding: 0 10px;
}

#menu li a {
  color: #fff;
}

@media only screen and (max-width: 767px) {
  #bar {
    grid-template-columns: auto !important;
    text-align: center !important;
  }
  
  #menu {
    text-align: center !important;
    padding-top: 20px;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="head" class="sticky">
    <div id="bar">
      <div id="logo" class="sticky">
        <a href="http://www.myrkur.net"><img src="oldie/img/myrkur-logo.jpg" /></a>
      </div>
      <ul id="menu" class="sticky">
        <li class="link"><a class="nav-link js-scroll-trigger" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ae9e3e9eefff7daf7e3ff"><email_protected></a>">Contact</a></li>
        <li class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/">System</a></li>
        <li class="link"><a class="nav-link js-scroll-trigger" href="http://wiki.myrkur.net">Wiki</a></li>
        <li class="link"><a class="nav-link js-scroll-trigger" href="https://members.myrkur.net/addalbum.php">Add album</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

I have positioned the image to the left, but if you prefer it on the right, simply swap the divs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself. In the CSS, I have defined the font-face like so: @font-face{ font-family ...

androidhtmlcssfontswebview

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

I have implemented Lazy loading in my Project. I found a reference at which explains how to make an ajax call after scrolling and image upload with slow mode without allowing scrolling until the loader is shown. The code snippet I am using is as follows: ...

javascriptjqueryhtmlajaxasp.net-mvc

The Art of Revealing an Element

Is it possible to manipulate a parent div element in JavaScript without affecting its child nodes? For example, transforming this structure: <div class="parent"> <div class="child"> <div class="grandchil ...

javascripthtml

What is the best way to stack col-xs-6 elements instead of having them side by side?

My form fields are currently set up using 3 col-xs-6 classes, but I'm not seeing the desired layout. I am aiming for: | col-xs-6 | | col-xs-6 | | col-xs-6 | However, what I am getting is: | col-xs-6 | col-xs-6 | | col-xs-6 | I understand that th ...

javascripthtmlcssangularjs

Prevent Symfony2 Twig from rendering HTML content

Is there a way to disable the rendering of HTML responses in Twig? I am currently working on a RESTful API and my goal is to completely prevent HTML rendering. For instance, if I access /foo/bar without an oAuth Access Token, Symfony2 should reply with a ...

htmljsonrestsymfonytwig

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

I have this HTML code that is functioning well on Chrome, Safari, and Mobile Safari. However, when testing it on Android 4.0.3, the translateZ property does not seem to have any desired effect on the div element. While everything else works as expected, ...

androidcss3dwebkittransform

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

Backstretch malfunctioning

Looking to enhance my webpage with a backstretch image slideshow effect using the body background, but encountering issues. The code I have included before the </head> tag is: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery ...

javascriptjqueryhtml

I desire to share the JSON information and receive the corresponding response data

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> ...

javascriptjqueryhtmlajaxrest

Sliding Navigation Panel

Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows: <div id="mySidenav" class="sidenav"> <a href="j ...

css

Exploring the process of web scraping from dynamic websites using C#

I am attempting to extract data from using HtmlAgilityPack. The website is dynamic in nature, displaying content after the page has fully loaded. Currently, my code retrieves the HTML of the loading bar using this method, but encounters a TargetInvocation ...

javascriptc#html

Tips for perfectly aligning heading both horizontally and vertically

https://i.sstatic.net/8ttSh.png https://i.sstatic.net/vSsH5.png My website has a header with text that I want to center both horizontally and vertically. I am currently using the 'text-center' class in Bootstrap 4, which centers the text but onl ...

htmlcssbootstrap-4

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints? interface EmptyStateProps { title: string; description: string ...

javascriptcssreactjsmaterial-ui

javascript popup appears twice in IE when using PHP

After testing this script on multiple browsers, an issue arises when using IE. In all other browsers, the form submission alert only appears once. However, in Internet Explorer, the alert pops up twice. What could be causing this discrepancy? <!DOCTYP ...

javascriptphphtml

The z-index property in CSS is not functioning as expected when used with an absolute div inside a

https://i.sstatic.net/MnNQY.png Why isn't z-index working for me? I have a process div (container) Inside the process div, there are links in a row. These links are further divided into progress_number divs (large number) and progress_text divs (shor ...

htmlcssz-index

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

javascriptjqueryhtmlcss

What is the best way to showcase just 5 photos while also incorporating a "load more" function with

Is there a way to display only 5 images from a list on the first load, and then show all images when the user clicks on "load more"? Here is the code I have: $('.photos-list').hide(); $('.photos-list').slice(1, 5).show(); $ ...

javascripthtmljquerycss

Is there a way to format the text into a curved half-capsule shape?

<div class="bg-primary rounded-pill"> <p class="text-right"> TOTAL AMOUNT </p> <p class="text-right"> 200 </p> </div> I would like the text within a div element to appear in a capsule shape. Is there a way t ...

cssbootstrap-5

Tips for efficiently exporting and handling data from a customizable table

I recently discovered an editable table feature on https://codepen.io/ashblue/pen/mCtuA While the editable table works perfectly for me, I have encountered a challenge when cloning the table and exporting its data. Below is the code snippet: // JavaScr ...

javascriptphpjquerycss

Can someone help me transform this LESS code into SCSS?

Currently, I am working on adapting a theme from [www.bootswatch.com][1] that is originally in less format to scss for my rails application. Although I am not well-versed in either SCSS or LESS, I have been researching the variances and have identified so ...

csssassless