Styling inline nav buttons

Support
#1

I’m wanting to make each button in my inline nav a different color. How can I do that? It’s the inline nav element in section 1 on the page provided in secure note.
thanks

#2

Hello @threeoten,

Thanks for asking. :slight_smile:

You can use menu id along with the CSS selector to change menu item color. You can add following CSS under Pro > Theme Options > CSS:

#menu-item-83 a span {
    color: #fff !important;
}

You need to replace 83 i.e the id of menu from above code. To find out menu id, please refer following tutorial.

https://wpexplorer-themes.com/total/docs/find-menu-id-wordpress/

Thanks.

#3

Thanks! I ended up using the following css in order to use transparency and not have the bg of text-primary overlap

#menu-item-289, .x-anchor-text-primary a span { background-color: rgba(232, 219, 130, 0.7); border-radius:10px; }

#4

Glad to hear that. :slight_smile:

#5

They look really bad on smaller screens because they don’t break out of their row orientation, how can I make each button collapse and stack into a 1 vertical column?

#6

Hi There,

Please enable the wrap children option of your inline navigation element.



And with that, you need to have your Top Links a bottom margin so they have space in between when they stack

Hope it helps,
Cheers!

#7

I notice that “wrap children” does wrap the menu items but it doesn’t stack them into 1 column like it would if you click “Column” instead of “Row” in the element’s flex layout panel. Is there an @media that I can do to make it go to column at a certain screen size, or is there a better way to do this?

Also, adding bottom margin to the top links also makes the buttons background stretch as if I were adding bottom padding. The css that I’m using for each button is above in my second post.

A screen cast to demonstrate: https://screencast.com/t/BlfVAPnU

#8

Hi There,

It looks good on small screen sizes now:

Can you confirm that you’ve sorted it out?

Cheers!

#9

I’m using the following css. But I’m using $el in the last css rule. If I moved it to global css, what would I replace $el with?

#menu-item-289, .x-anchor-text-primary a span {
    background-color: rgba(232, 219, 130, 0.7);
  	border-radius:10px;
  	margin-bottom:1em;
}
#menu-item-290, .x-anchor-text-primary a span {
    background-color: rgba(234, 150, 145, 0.7);
    border-radius:10px;
  	margin-bottom:1em;
}
#menu-item-291, .x-anchor-text-primary a span {
    background-color: rgba(138, 195, 212, 0.7);
    border-radius:10px;
   	margin-bottom:1em;
}
#menu-item-292, .x-anchor-text-primary a span {
    background-color: rgba(147, 222, 170, 0.7);
    border-radius:10px;
  	margin-bottom:1em;
}

@media (max-width: 1000px){
$el.x-menu-inline {
  flex-direction: column;
}
}
#10

Hello @threeoten,

If you move css out of the element, you will need to use this:

@media (max-width: 1000px){
  .x-menu.x-menu-inline {
    flex-direction: column;
  }
}

Please let us know if this works out for you.

#11

It works, thank you!

#12

You’re welcome!
Thanks for letting us know that it has worked for you.

#13

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