How to add space(s) between specific menu items in Wordpress-CodePudding

I have a menu in the header that currently looks like this:

Home Page1 Page2 Page3 Page4 Page5 Page6 Page7

How can I make it look like this?

Home Page1 Page2 Page3 Page4 Page5                     Page6 Page7

Basically, the last 2 items on the menu should reside on the far right, while the rest on the left.

The theme I'm using doesn't seem to give such an option.

CodePudding user response：

You did not provide your HTML structure so here is a basic example of how to use flexbox to achieve the result using responsive design with minimal markup. Eventually, this will reach a breakpoint and you will need to use a media query to restyle it for those smaller viewports.

.menu {
  display:flex;
  flex-direction:row;
  list-style-type:none;
  gap:1rem;
  width:100%;
}
.menu>div:nth-of-type(7){
  margin-left:auto;
}

<div >
  <div><a href="#">Home</a></div>
  <div><a href="#">Page1</a></div>
  <div><a href="#">Page2</a></div>
  <div><a href="#">Page3</a></div>
  <div><a href="#">Page4</a></div>
  <div><a href="#">Page5</a></div>
  <div><a href="#">Page6</a></div>
  <div><a href="#">Page7</a></div>
</div>

CodePudding user response：

Without your html structure it will be difficult to answer, but if it's a straightforward nav you can utilize the :nth-child() CSS Selector (MDN documentation link) to give margin-right styling to only the Page5 element in your example.

nav a {
  display: inline-block;
}

nav a:nth-child(6) {
  margin-right: 2rem;
}

<nav aria-label="Main navigation">
  <a href="#">Home</a>
  <a href="#">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
  <a href="#">Page6</a>
  <a href="#">Page7</a>
</nav>