Customizing Your Navbar: Replacing Site Name with a Logo

Important Notice: Advanced Customization

The following guide involves advanced customization of your site's CSS code. This process requires a basic understanding of Cascading Style Sheets (CSS) and how they affect your website's appearance. If you're not familiar with editing CSS or are uncomfortable making code changes, we recommend seeking assistance from someone with web development experience.

You can personalize your Pool Queue site by replacing the default site name in the navigation bar with your own logo. This guide will walk you through the steps to override the navbar text using custom CSS, allowing you to display your logo on both desktop and mobile devices.

Steps to Replace the Navbar Text with a Logo

1. Prepare Your Logo Images:

   • Desktop Logo: Choose or create a logo image suitable for desktop view. Ideally, this should be a horizontal image.
   • Mobile Logo: Select a logo image optimized for mobile devices. A more compact or square image works best.
   • Use SVG Format: We recommend using SVG (Scalable Vector Graphics) files for your logos. SVGs scale without loss of quality and have smaller file sizes, enhancing your site's performance.
   • Upload Images: Upload your logo images to a publicly accessible URL or your Pool Queue media library to obtain direct links to the images.

2. Access the Site Setup:

   • Log in to your Pool Queue administrative dashboard.
   • Navigate to Setup in the main menu.
   • Click on the Site section to access site customization options.

3. Add Custom CSS:

   • In the Custom CSS dialog, you'll add the CSS code provided below.
   • Replace the placeholder image URLs in the code with the direct links to your own logo images.

4. Insert the Custom CSS Code:

   /* Hide the default site name text and position the brand element */
   .navbar-brand {
       position: relative !important;
       color: transparent !important;
       display: inline-block;
       width: 150px; /* Adjust width as needed */
       height: 50px; /* Adjust height as needed */
       background: url('YOUR_DESKTOP_LOGO_SVG_URL') no-repeat center center;
       background-size: contain;
       background-repeat: no-repeat;
       z-index: -1;
   }
   
   /* Customize the logo for mobile devices */
   @media (max-width: 767.98px) {
       .navbar-brand {
           /* Different logo for mobile devices */
           background: url('YOUR_MOBILE_LOGO_SVG_URL') no-repeat left center;
           background-size: cover;
           background-repeat: no-repeat;
           width: 60vw; /* Adjust width for mobile */
           margin: 0;
           padding: 0;
       }
   }

   • Replace YOUR_DESKTOP_LOGO_SVG_URL with the URL of your desktop SVG logo image.

   • Replace YOUR_MOBILE_LOGO_SVG_URL with the URL of your mobile SVG logo image.
   • Adjust Width and Height: Modify the width and height values to fit your logo dimensions appropriately.

5. Save Changes:

   • After inserting and customizing the CSS code, click the Save or Update button to apply the changes to your site.

6. Preview Your Site:

   • Visit your website to ensure the logo appears correctly in the navigation bar on both desktop and mobile devices.
   • If necessary, return to the CSS code and adjust the sizing or positioning.

Tips

• Use SVGs for Logos:

  • Advantages:
    • Scalability: SVGs scale to any size without losing quality, ensuring your logo looks sharp on all devices.
    • Performance: Smaller file sizes help your site load faster.
    • Styling and Animation: SVGs can be styled and animated with CSS and JavaScript.
  • Fallback Options: If an SVG version isn't available, use a high-resolution PNG image. Keep in mind that raster images may not scale as well and can appear pixelated on larger screens or high-DPI displays.

Troubleshooting

• Logo Not Showing: Double-check the image URLs to ensure they are correct and publicly accessible.
• Sizing Issues: If the logo appears stretched or squashed, adjust the background-size, width, and height properties.
  • Experiment with background-size: Try values like contain, cover, or specific percentages.
• CSS Conflicts: If the logo doesn't appear as expected, there may be conflicting styles.
  • Use !important: Adding !important to your CSS properties can help override existing styles.