Skip to content Skip to sidebar Skip to footer
Home / Css / Html

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

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><ulid="boxwp-menu-secondary-navigation"class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu"><liid="menu-item-60147"class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><ahref="https://www.website.com/wp-login.php?action=logout">Logout</a></li><liid="menu-item-60175"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><ahref="https://www.website.com/favorites/">Favorites</a></li><liid="menu-item-60946"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><ahref="https://www.website.com/price-finder/">Price</a></li><liid="menu-item-70793"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><ahref="https://www.website.com/">Finder</a></li><liid="menu-item-60146"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><ahref="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

<divclass="boxwp-container boxwp-secondary-menu-container clearfix"><divclass="boxwp-secondary-menu-container-inside clearfix"><navclass="boxwp-nav-secondary"id="boxwp-secondary-navigation"itemscope="itemscope"itemtype="http://schema.org/SiteNavigationElement"role="navigation"><divclass="boxwp-secondary-responsive-menu-icon"></div><ulid="boxwp-menu-secondary-navigation"class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu"><liid="menu-item-60187"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60187"><ahref="https://www.website.com/edit-profile/">Edit Profile</a></li><liid="menu-item-60147"class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><ahref="https://www.website.com/wp-login.php?action=logout">Logout</a></li><liid="menu-item-60175"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><ahref="https://www.website.com/favorites/">Favorites</a></li><liid="menu-item-60946"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><ahref="https://www.website.com/price-finder/">Price Finder</a></li><liid="menu-item-70793"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><ahref="https://www.website.com/coupon-finder/">Coupon Finder</a></li></ul><ulid="sticky-nav-menu"class="boxwp-menu-secondary boxwp-secondary-responsive-menu"><liid="menu-item-60146"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><ahref="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-navigationlia,
    #sticky-nav-menulia {
      display: block;
      color: white;
      text-align: center;
      text-decoration: none;
      font: normal normal 13px Oswald, Arial, Helvetica, sans-serif;
      line-height: 1;
      text-shadow: 01px0#000000;
    }

    #boxwp-menu-secondary-navigationlia:hover,
    #sticky-nav-menulia:hover {
      background-color: #111;
    }

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

    #boxwp-menu-secondary-navigationli {
      float: left;
    }

    @mediaonly screen and (min-width: 1112px) {
      #boxwp-menu-secondary-navigationlia,
      #sticky-nav-menu.menu-item.menu-item-object-page.menu-item-60146a {
        padding: 14px16px;
      }
    }

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.

functionmyFunction(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: 6px0;
  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 */.sidenava {
  padding: 8px8px8px32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */.sidenava: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;}
  .sidenava {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;
}

lia {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px16px;
  text-decoration: none;
}

lia:hover {
  background-color: #ccc;
}

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

#ham {
position: absolute;
z-index: 100;
 margin-bottom: -2rem;
 color: '#fff';
}
<divid="main"><nav><divclass="container"id="ham"onclick="myFunction(this)"><divclass="bar1"></div><divclass="bar2"></div><divclass="bar3"></div></div><ulid="boxwp-menu-secondary-navigation"class="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu"><spanid="hide-mobile"><liid="menu-item-60147"class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147 hide-mobile"><ahref="https://www.website.com/wp-login.php?action=logout">Logout</a></li><liid="menu-item-60175"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175 hide-mobile"><ahref="https://www.website.com/favorites/">Favorites</a></li><liid="menu-item-60946"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946 hide-mobile"><ahref="https://www.website.com/price-finder/">Price</a></li><liid="menu-item-70793"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793 hide-mobile"><ahref="https://www.website.com/">Finder</a></li></span><liid="menu-item-60146"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60146"><ahref="https://www.website.com/blog/home/contact/">Contact</a></li></ul></nav><divid="mySidenav"class="sidenav"><nav><ulclass="boxwp-secondary-nav-menu boxwp-menu-secondary boxwp-secondary-responsive-menu"><liid="menu-item-60147"class="menu-item menu-item-type-custom menu-item-object-custom menu-item-60147"><ahref="https://www.website.com/wp-login.php?action=logout">Logout</a></li><liid="menu-item-60175"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60175"><ahref="https://www.website.com/favorites/">Favorites</a></li><liid="menu-item-60946"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60946"><ahref="https://www.website.com/price-finder/">Price</a></li><liid="menu-item-70793"class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70793"><ahref="https://www.website.com/">Finder</a></li></ul></nav></div></div>

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