Creating a website through Obior is easy, and no coding skills are required– but sometimes you can spruce up your page even more with CSS.

In this article you will find a compiled list of CSS we have gathered from Obior users. The list is sorted by theme because not all CSS will work with every theme.

Just go to Design Editor > Custom, copy and paste the code, then paste it in CSS field.


  • You can take off the "Menu Background" at the top of the page

Code: body #nav {background-color:transparent  !important}


  • You can add a "Call to Action" button as a menu item and modify how it looks with colors

  • First to go Page > Add a Page > Link > Under Page Info > Name, insert the name of your menu item like "Buy Tickets"> Under Link URL, either insert the link to your webshop or you can link to an internal page on your website that you already have– like events or news.

  • After you've created the Link Page, go to Design Editor > CSS > and paste the below code in Custom CSS

  • NOTE: The colors given in this code will make your button purple and yellow. Replace the bolded numbers after '#' with your own color codes. You can find codes here:


#nav  .navbar-nav  .nav-item:last-child .nav-link{
  background-color: #693c90;
  color:  #f0de00  !important;
  transform:  2s  ease-in-out;}

#nav  .navbar-nav  .nav-item:last-child .nav-link:hover{
  background-color: #3B2150;
  color:  #f0de00  !important;}

Did this answer your question?