fbpx
Welcome, Guest
Username: Password: Remember me

Building something on Astroid?

Submit your site to be featured in our monthly Astroid Site Showcase!

Submit Now

TOPIC: (SOLVED)Separator for Navigation

Separator for Navigation 6 months 1 week ago #10289

  • onechance
  • onechance's Avatar
  • Offline
  • Junior Member
  • Posts: 35
  • Karma: 0
Hey guys,

I need to add separators between elements of navigation, in thise case ONLY before the Search menu



I tried it like this, without success
.astroid-nav .nav-link:before .SearchMenu-Custom {
  content: '|';
  padding: 0 1rem;
}

I'm know this is nothing to you :P

Thanks
Last Edit: 6 months 1 week ago by onechance.
The topic has been locked.

Separator for Navigation 6 months 1 week ago #10290

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2881
  • Thank you received: 460
  • Karma: 73
Please follow the steps:

  • First, add the "separator" class in the search menu item. See the screenshot
  • Second, Add the following code. The code according to your site(mirinsoft).

.astroid-nav .separator{
    position: relative;
}

.astroid-nav .separator:before {
    position: absolute;
    content: "|";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The topic has been locked.

Separator for Navigation 6 months 1 week ago #10307

  • onechance
  • onechance's Avatar
  • Offline
  • Junior Member
  • Posts: 35
  • Karma: 0
That made it : )Many thanks Chandan!
The topic has been locked.

Separator for Navigation 6 months 1 week ago #10326

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 396
  • Thank you received: 57
  • Karma: 13
Great :)

Let us know if you have any query.

Thanks
Lalit
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The topic has been locked.
Time to create page: 0.151 seconds

JD Builder - The Next Generation
Joomla Page Builder


Now Design any Layout with Drag and Drop Interface.