How can I add a button to my Navbar?

Support
#1

Hi,

I would like to add a button inline with my logo on the navbar.

Thanks.

#2

Hi There,

Thanks for writing in!

As you are using X there is no such option to add a button, But you can do this in custom CSS.
Please let us know what exactly you want to achieve with a screen shot so that we can suggest you better.

Thanks

#3

Hi @basanta,

Sure, here:

Thanks.

#4

Any feedback yet?

#5

Hi there,

Please avoid self bumping your thread as doing so would push the thread to the back of the queue which would possibly lead to a longer response time.

As for the menu item displaying as a button, you can achieve this by adding a class to the menu item then add some CSS codes to add the button effect.

First, to add a class to the menu item, enable the CSS Classes option using the Screen Option setting that you can find on the top right area when you are on the Menu settings page.

Once CSS classes is enabled, you should be able to see the field added to the menu item settings as shown above.

Add a class to the menu item that you want to be styled as a button.

Let’s assume that the class you added is menu-btn then add this code in the Global CSS:

.x-navbar .desktop .x-nav > li.menu-btn > a > span {
    border: 2px solid #4d4d4d;
    padding: 8px 18px;
    display: inline-block;
    margin-top: -8px;
}

Please note that the code above may not style the menu item exactly how you want it. You will have to edit the code to fit to what you are aiming for but it should get you started.

  • You can find more info on how to check for CSS selectors here.
  • Then information about writing your custom CSS here.

Hope this helps.

#6

Thanks for the advice.

Wasn’t trying to bump, rather was waiting for your advice as I was solely busy
with this yesterday.

Anyway, with your code, I get a bottom black line under the navbar/logo.

Can’t seem to trace the problem…

#7

Hello @Refresh,

Thanks for asking. :slight_smile:

I have tested the code my colleague shared in previous reply and it’s working fine on my end. Here is a screenshot. https://cl.ly/2j3S0j1i3Y2g

Upon checking the website URL it seems that you have’t assigned the menu as yet. Please assign the menu and then see how it goes.

Thanks.

#8

Hi @Prasant,

Thanks for getting back to me.

I’ve done everything advised (from what is apparent) in your colleague’s advice above.
What am I missing then? I thought I have “assigned a menu”?

#9

Hi There,

Since you’re not using the UberMenu plugin, please navigate to Plugins panel and deactivate the UberMenu. This should get you back the standard header menu.

If you see a notice on the header that says “ASSIGN A MENU”, navigate to Appearance > Menus, and set your menu to be the primary


Then redo the suggestion by Jade above.

Hope it helps,
Cheers!

#10

HI @friech,

Thanks, I’m on it right now…

#11

Ok, I’ve done that but now I don’t see the pages like you see them on your side…

Is it because I haven’t published them?

#12

Hi again,

Yes that’s right, unpublished pages don’t appear in Menus Pages section, just publish your pages to have them in the Pages list.

Hope this helps!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.