Header

The Header Settings section allows you to customize your website’s logo, header layout, navigation, and news ticker. To access:

WordPress Dashboard → Appearance → Customize → Header

  • Desktop Logo: Upload or remove the logo for desktop view.

  • Mobile Logo: Upload or remove the logo for mobile view.


🖥 Desktop Header

Manage the layout and options for your website’s desktop header.

  • Logo Width: Adjust logo size (default: 120px, adjustable via slider).

  • Show Small Header: Enable or disable the small header.

  • Social Icons: Show or hide social icons in the small header.

  • News Ticker: Turn ON/OFF the header news ticker.

  • News Ticker Position: Choose the position (example: Below Header).

📸 Add screenshot here showing Desktop Header options


📱 Mobile Header

Manage the layout and colors for your mobile header.

  • Background Color: Choose a background color.

  • Icons Color: Choose a color for header icons.

📸 Add screenshot here showing Mobile Header color pickers


Customize your main navigation menu settings.

  • Enable Sticky Nav: Keep the navigation bar fixed at the top while scrolling.

  • Navigation Background: Select background color (default: #121212).

  • Menu Items Hover: Select hover background color (default: #f4ac04).

  • Menu Active Tab: Select active menu tab background color (default: #f4ac04).

  • Menu Border: Select color for the main menu top border (default: #f4ac04).

  • Menu Items Border: Select color for menu items border.

📸 Add screenshot here showing Navigation color settings


📰 News Ticker

Manage the top scrolling news bar in the header.

  • Hide on Mobile: Enable/disable ticker on mobile devices.

  • Select Category: Choose a category for ticker posts (example: اہم خبریں).

  • Posts Limit: Set number of posts to display (example: 8).

  • Ticker Label: Enter label text for ticker.

📸 Add screenshot here showing News Ticker settings


✅ Tips

  • Upload logos in transparent PNG format for best results.

  • Keep ticker posts short for smooth scrolling.

  • Use consistent colors for navigation hover and active states for a clean design.

Last updated

Was this helpful?