Navi+ | User manual
  • 🏠Dashboard
  • FAQs & Tips
    • 💰Why can Navi+ help you save money?
    • ⚡Is Navi+ fast? Does it affect website speed?
    • 🧙Why aren't my Menu, Search, and Cart (panels) working?
    • 👩‍❤️‍👩How to prevent Navi+ from overlapping other apps like Chat/WhatsApp...?
    • 🔠How to add Navi+ to a separate page through Theme Session
    • 🌍Why is Navi+ menu not displayed on my website?
    • 🆎How to write a correct CSS code in Navi+
    • ↗️What is Menu depth and how to use?
    • 📭How do I open a Shopify Inbox chat window instead of using the default float button?
    • 🔁How to completely replace the default header of a website?
    • 💹Navi+ service plan policies. (Starter, Business & Elite)
  • Theme compatibility
    • 📔Impulse theme & Navi+ menu
    • 📔Impact theme & Navi+ menu
  • Links
    • Back to website
    • Install Navi+
Powered by GitBook
On this page
  • Level 1: Internal Stylesheet / CSS (#SF-123456789)
  • Level 2: Global Stylesheet / CSS
  1. FAQs & Tips

How to write a correct CSS code in Navi+

CSS is the key to every problem when you need to customize deeply for Navi+. Almost all interface things on Navi+ can be solved with CSS code. In Navi+, there are 2 levels of CSS:

Level 1: Internal Stylesheet / CSS (#SF-123456789)

This is the recommended level to use in most cases. When you write code in this box, the system automatically adds a prefix that is #SF-123456789 (that is your menu ID) to the beginning of CSS tags. This will ensure there is no conflict with all other interface components.

See the example before and after compiling CSS in this box below

// Your CSS code
{
   margin-bottom: 64px;
}

@media only screen and (max-width: 600px) {
   {
      margin-bottom: 164px;
   }
}
// The CSS code after being compiled

#SF-123456789 {
   margin-bottom: 64px;
}

@media only screen and (max-width: 600px) {
   #SF-123456789 {
      margin-bottom: 164px;
   }
}

Level 2: Global Stylesheet / CSS

Unless you have experience with CSS, avoid abusing this box because everything will be pushed straight out in the form you write CSS code without any conflict protection layer.

PreviousWhy is Navi+ menu not displayed on my website?NextWhat is Menu depth and how to use?

Last updated 1 year ago

🆎