Navigation Links on BOTH SIDES of Logo

Site URL: http://hilarybeckwith.com/main-page

Hello - I read in another forum post (the instructions were incomplete), that in order to place navigation links on both the LEFT and the RIGHT side of the logo in the header, that first one would need to do the following:

1) Change the header layout to be: Navigation Links (left aligned), Logo (centered), button (right aligned).

2) Add whatever links I want displayed to the RIGHT of the logo, into a text box in the FOOTER, at which point a code can then be populated to move the text box to the appropriate space in the Header.

I have completed these steps, but the original poster did not follow through, and so the person assisting could not complete the code.  Can someone help walk me through this, please?

As a secondary question, how do I change the font size for the navigation links?

I appreciate any help! Please be clear and descriptive, CSS coding is not something I'm terribly familiar with.

It looks like you solved? With nav links spacing, use this code

.header-nav-item {
    margin-right: 1.1vw;
    padding-right: 0.9vw !important;
}

1 hour ago, tuanphan said:

It looks like you solved? With nav links spacing, use this code

.header-nav-item {
    margin-right: 1.1vw;
    padding-right: 0.9vw !important;
}

 

Thank you, I tried fiddling around with that, it didn't seem to change the spacing between each link. What am I missing?

On 8/31/2021 at 9:19 AM, hilaryb said:

Thank you, I tried fiddling around with that, it didn't seem to change the spacing between each link. What am I missing?

Try this code

.header-nav-list .header-nav-item {
    padding-right: 4vw !important;
}
.header-actions .header-nav-item {
    padding-right: 4vw !important;
}

Thank you - my next question has to do with the color. It seems as I flip through different pages, the color of the links changes from page to page, the links left of the logo coincide with the color theme for that page, but the links to the RIGHT of the logo seem to have a mind of their own.

Is there a fix for this? 

@hilaryb would you be able to share the additional steps that need to be taken after adding links into a text box in the FOOTER?

It looks like you were able to figure that out for your site and I am trying to do the same thing with my site. 

Thank you so much!

10 minutes ago, LindseyM said:

@hilaryb would you be able to share the additional steps that need to be taken after adding links into a text box in the FOOTER?

It looks like you were able to figure that out for your site and I am trying to do the same thing with my site. 

Thank you so much!

Hi Lindsey,

It turned out those instructions were for a different template, and I was able to get a different method/code altogether. So I am not sure how to do it after adding the links to the footer. 

The code I was given instead, I pasted below - I suppose you could try it! (But as you can see, it messes with the color, so I'm still trying to figure that out.

/**NAV-LINKS ON BOTH SIDES OF LOGO**/
.header-actions .header-nav-item {
  padding-right:1.1vw !important; 
}

.header-nav-list   {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end !important;
      -ms-flex-pack:end !important;
          justify-content:flex-end !important;
  .header-nav-item {
     padding-right:1.1vw !important; 
  }
}

.header-actions--right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}

.header-nav-list .header-nav-item {
    padding-right: 1vw !important;
}
.header-actions .header-nav-item {
    padding-right: 1vw !important;
}
 

For anyone else who might be looking for an answer to this question, this tutorial worked for me. I believe this plugin would also get the job done.

On 5/13/2022 at 12:05 PM, JenTerpstra said:

For anyone else who might be looking for an answer to this question, this tutorial worked for me. I believe this plugin would also get the job done.

Thank you JenTerpstra! 

On 5/13/2022 at 11:05 PM, JenTerpstra said:

For anyone else who might be looking for an answer to this question, this tutorial worked for me. I believe this plugin would also get the job done.

I used this tutorial and it works perfectly... except the spacing isn't ideal and it didn't all appear on one line (the links were stacking)

I added the following code:

/* nav one line */
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
}

And now the links are all on one line.

The logo is centered, but the links spread out way more on the left than they do on the right. Does any have a CSS fix for making the longer links like 'Mindfulness Workshops' and 'Online Programs' split onto two lines so they take up less space.

Website link: https://www.purposefulvibes.com/