Align Item Of Primary Menu To The Right Works But Does Not Display Correctly On Tablet And Smartphone

August 29, 2022 Post a Comment

Hello I am new to CSS and I am using a snippet to align an item of my primary menu at my wordpress website to the right side. #menu-item-60146 { float: right; } It works on PC a

Solution 1:

You can achieve this using an absolute positioning along with a media query.

@media screen and (max-width: 768px) {
  .menu-item-60146 {
    position: absolute;
    top: 5px; /* play around to match your hamburger menu*/
    right: 12px;
  }
}

<nav>
  <ul id="boxwp-menu-secondary-navigation" class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">

    <li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>

    <li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><a href="https://www.website.com/favorites/">Favorites</a></li>

    <li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><a href="https://www.website.com/price-finder/">Price</a></li>

      <li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><a href="https://www.website.com/">Finder</a></li>

      <li id="menu-item-60146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><a href="https://www.website.com/blog/home/contact/">Contact</a></li>

  </ul>
</nav>

EDIT 2

Here you go, replace your css and html with this

html

    <div class="boxwp-container boxwp-secondary-menu-container clearfix">
      <div class="boxwp-secondary-menu-container-inside clearfix">
        <nav class="boxwp-nav-secondary" id="boxwp-secondary-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
          <div class="boxwp-secondary-responsive-menu-icon"></div>

          <ul id="boxwp-menu-secondary-navigation" class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">
            <li id="menu-item-60187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60187"><a href="https://www.website.com/edit-profile/">Edit Profile</a></li>
            <li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>
            <li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><a href="https://www.website.com/favorites/">Favorites</a></li>
            <li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><a href="https://www.website.com/price-finder/">Price Finder</a></li>
            <li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><a href="https://www.website.com/coupon-finder/">Coupon Finder</a></li>
          </ul>

          <ul id="sticky-nav-menu" class="boxwp-menu-secondary boxwp-secondary-responsive-menu">
            <li id="menu-item-60146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><a href="https://www.website.com/blog/home/contact/">CONTACT</a></li>
          </ul>

        </nav>
      </div>
    </div>

CSS

    #sticky-nav-menu {
      margin: 0;
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      list-style-type: none;
    }

    #boxwp-menu-secondary-navigation {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    #boxwp-menu-secondary-navigation li a,
    #sticky-nav-menu li a {
      display: block;
      color: white;
      text-align: center;
      text-decoration: none;
      font: normal normal 13px Oswald, Arial, Helvetica, sans-serif;
      line-height: 1;
      text-shadow: 0 1px 0 #000000;
    }

    #boxwp-menu-secondary-navigation li a:hover,
    #sticky-nav-menu li a:hover {
      background-color: #111;
    }

    #sticky-nav-menu .menu-item.menu-item-object-page.menu-item-60146 a {
      padding: 9px 20px;
    }

    #boxwp-menu-secondary-navigation li {
      float: left;
    }

    @media only screen and (min-width: 1112px) {
      #boxwp-menu-secondary-navigation li a,
      #sticky-nav-menu .menu-item.menu-item-object-page.menu-item-60146 a {
        padding: 14px 16px;
      }
    }

Baca Juga

Solution 2:

Try something like this. I converted your menu into two. Since you didnt supply the code for hamburger, I added my own. Depending on what language you are using, you may be able to make the menu a component or variable and reuse unlike how I had to repeat it twice.

function myFunction(x) {
  var y = document.getElementById("ham");
  if (y.className == "container change") {
   y.classList.remove("change");
   document.getElementById("mySidenav").style.width = "0px";
   document.getElementById("main").style.marginLeft = "0px";
      document.getElementById("hide-mobile").style.display = "block";
  }
  else {
  y.classList.add("change");
     document.getElementById("mySidenav").style.width = "250px";
   document.getElementById("main").style.marginLeft = "250px";
   document.getElementById("hide-mobile").style.display = "none";
   
  }
  
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 480px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

@media screen and (max-width: 480px) {
  .hide-mobile { display: none; }
  }


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f1f1f1;
}

li {
  float: left;
}

.menu-item-60146 {
float: right;
}

li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ccc;
}

#boxwp-menu-secondary-navigation {
 margin-left: 2rem;
}

#ham {
position: absolute;
z-index: 100;
 margin-bottom: -2rem;
 color: '#fff';
}

<div id="main">
<nav>
<div class="container" id="ham" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
  <ul id="boxwp-menu-secondary-navigation" class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">
   <span id="hide-mobile">
    <li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147 hide-mobile"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>

    <li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175 hide-mobile"><a href="https://www.website.com/favorites/">Favorites</a></li>

    <li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946 hide-mobile"><a href="https://www.website.com/price-finder/">Price</a></li>

    <li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793 hide-mobile"><a href="https://www.website.com/">Finder</a></li>
    </span>

    <li id="menu-item-60146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><a href="https://www.website.com/blog/home/contact/">Contact</a></li>

  </ul>
</nav>


<div id="mySidenav" class="sidenav">
<nav>
  <ul class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu">

<li id="menu-item-60147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><a href="https://www.website.com/wp-login.php?action=logout">Logout</a></li>

<li id="menu-item-60175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><a href="https://www.website.com/favorites/">Favorites</a></li>

<li id="menu-item-60946" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><a href="https://www.website.com/price-finder/">Price</a></li>

<li id="menu-item-70793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><a href="https://www.website.com/">Finder</a></li>


  </ul>
</nav>
</div>
</div>

Html5 Cafe

Align Item Of Primary Menu To The Right Works But Does Not Display Correctly On Tablet And Smartphone

Solution 1:

EDIT 2

Solution 2:

Post a Comment for "Align Item Of Primary Menu To The Right Works But Does Not Display Correctly On Tablet And Smartphone"