CODEWITHSUNDEEP
htmlcss
stefanosn
stefanosn

Reputation: 3324

Navigation Menu align one item to the right

I am new to CSS and i am trying to change a wordpress template in order to move the last item of my navigation menu to the right. I am using the following snippet:

.menu-item-60146
{
      float:right;
}
/*
But i see no result

When i use the following code the navigation menu moves to the right but i need to move one item.

.boxwp-nav-secondary
{
      float:right;
}
What do i have to do to move an item to the right?
*/
<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>

Upvotes: 0

Views: 1328

Answers (2)

DCR
DCR

Reputation: 15657

just float:right the last id. Also, just a suggestion, look into flexbox it's worth learning and will save you hours of time.

#menu-item-60146
{
      float:right;
}
/*
But i see no result

When i use the following code the navigation menu moves to the right but i need to move one item.

.boxwp-nav-secondary
{
      float:right;
}
What do i have to do to move an item to the right?
*/
<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>

Upvotes: 0

Kal
Kal

Reputation: 1774

I changed your code a bit to use standard styling for ul and li. Feel free to replace ul and li with a class and style that class.

Here is a working version of your code.

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

li {
  float: left;
}

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

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

li a:hover {
  background-color: #111;
}
<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>

Upvotes: 1

Related Questions