How to alter last item in menu

Hi there,

Your site is under maintenance mode, can you disable that for me to see the menu items? Thanks!

My apologies, you now have access.

Rounded corners would also be an awesome addition too if we are able.

• This reply was modified 7 months, 3 weeks ago by Bri.

Does this help? https://docs.generatepress.com/article/adding-buttons-navigation/

It will certainly give me something to look at but it’s late here so it’ll be tomorrow now before I can have a proper look.

I was hoping it’d just be a bit off CSS that was missing from that last item to make it smaller and add the curved corners as opposed to having to rewrite what I already have.

Did you manage to look at the CSS I currently have as it may be a simple fix for someone more knowledgeable than myself?

The method shown in our documentation is the best way to achieve what you are looking for.

Thank you, I’ll take a look later today and let you know how I get on.

I’d like to achieve something like this:

<span style="background-color: blue; color: white; padding: 4px 8px; border-radius: 4px; cursor: pointer;">Contact</span>

The problem is that any padding I use makes the whole menu larger and a <span> tag breaks it causing overflow to the next line where as I want to keep it the same height as it is and all in line.

At the moment I’m just changing the background colour on hover but therein is the issue as it highlights the entire section.

Ok, after having a better look at the tutorial you linked and making a few changes to my CSS I have ended up with this:

This looks great unless I switch to mobile then it is flush with the bottom of the menu.. In an attempt to combat this I adjusted the line-height to be 40px which gives me a nice distance from the bottom of the mobile navigation menu. However, as it changes the line height both vertically and horizontally it now appears out of line with the other navigation items.

An image will be worth a thousand words here to show you what I mean. See below:

Is there any way of applying the space under the button while retaining the horizontal alignment with the other items? For example, is it possible to just add line-height to the top and bottom, but not on the sides?

Many thanks

• This reply was modified 7 months, 3 weeks ago by Bri. Reason: Correcting a typo

Double checking my CSS i see that it is the border: 8px solid #222222 causing the left and right alignment issue. However, if I remove this then there is no space at the bottom of the menu… So, I then removed border: 8px solid #222222; and added border-top: 8px solid #222222; and border-bottom: 8px solid #222222; which gave me the correct spacing but then the curved corners are incorrect.

To update my previous question, is there a way of only applying a border to the top and bottom of the button element while retaining a uniform border-radius?

This is what I currently have:

/* Style "Contact" button */
.main-navigation .main-nav ul li.contact-button a {
    background-color: #2ea3f2;
    border-top: 8px solid #222222;
    border-bottom: 8px solid #222222;
    color: #ffffff;
    line-height: 40px; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

• This reply was modified 7 months, 3 weeks ago by Bri.

The CSS shown in the documentation includes a desktop only media query @media (min-width: 769px) { so maybe you can consider that.

If not then you would need to write another set of CSS that is mobile only: https://docs.generatepress.com/article/responsive-display/

Hope this helps.

Thank you for getting back to me. A separate CSS rule for mobile is great and something I know how to do already. However, the issue is that (as per my earlier message) there is a mis-alignment between the Contact button and the rest of the menu items. This is being caused by adding 8px around it so that it looks like it doesn’t fill the entire height of the navigation bar.

As it stands, removing the 8px border makes it look exactly how i want it but there is no gap above or below meaning it looks like this:

My question is, how do I get rid of the above 8px border and insert a gap above and below the blue button while also still aligning width ways as it is in the above example with the other menu items?

Thank you.

• This reply was modified 7 months, 3 weeks ago by Bri.

A separate CSS rule for mobile is great and something I know how to do already.

Hmm but I’m not seeing a mobile-specific CSS being added currently and you definitely need that.

I’ve read through your description a couple of times but cannot understand what you are trying to achieve exactly.

Do you have an example of mock up to show?

I’d like the blue contact button to have a visible gap from the navigation buttons above it and also have the same gap below it so that it doesn’t sit flush with the bottom of the navigation menu.

How do I add this?

Something like this?

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.contact-button a {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
  

Thank you Leo. That works wonderfully. CSS is obviously not my strongest skill and I very much appreciate both your time and knowledge.

Thank you again

No problem ??