Master Page With Arabic Menu. RRS feed

  • Question

  • User-1565321417 posted

    Good day,

    I am building an Arabic ASP.NET web site.

    On the master page, I want the menu items to be aligned from right to left instead of left to right.

    How can I do this.

    Your help is appreciated.


    Assem Shawkat.

    Saturday, December 24, 2016 5:00 AM

All replies

  • User-271186128 posted

    Hi Assem Shawkat,

    Welcome to asp.net forum.

    On the master page, I want the menu items to be aligned from right to left instead of left to right.

    As for this issue, I suggest you could try to use the float Property and refer to the following code:

        <style type="text/css">
            ul {
            ul li{
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                    <li><a href="#">Item4</a></li>
                    <li><a href="#">Item5</a></li>

    The output as below:

    More details about float property, see: http://www.w3schools.com/css/css_float.asp

    Besides, here are some relevant article about create menu, you could refer to them:



    Best regards,

    Monday, December 26, 2016 5:54 AM
  • User-1565321417 posted

    Hi Dillion,

    Thanks for your reply. I will try this and come back to you.


    Assem Shawkat.

    Monday, December 26, 2016 6:02 AM
  • User-1101191399 posted

    Hi ,

    You use the below code and run then working Master Page With Arabic Menu

    <!DOCTYPE html>
    body {margin:0;}
    ul.topnav {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    ul.topnav li {float: right;}
    ul.topnav li a {
      display: inline-block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: 0.3s;
      font-size: 17px;
    ul.topnav li a:hover {background-color: #555;}
    ul.topnav li.icon {display: none;}
    @media screen and (max-width:680px) {
      ul.topnav li:not(:first-child) {display: none;}
      ul.topnav li.icon {
        float: right;
        display: inline-block;
    @media screen and (max-width:680px) {
      ul.topnav.responsive {;}
      ul.topnav.responsive li.icon {
        right: 0;
        top: 0;
      ul.topnav.responsive li {
        float: none;
        display: inline;
      ul.topnav.responsive li a {
        display: block;
        text-align: left;
    <ul class="topnav" id="myTopnav">
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
      <li class="icon">
        <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
    <div style="padding-left:16px">
      <h2>Responsive Topnav Example</h2>
      <p>Resize the browser window to see how it works.</p>
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";


    Wednesday, February 1, 2017 11:15 AM