File: /home/urgentelectrical/public_html/wp-content/themes/my-custom-theme/header.php
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php echo get_bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<!-- Top Bar -->
<div class="top-bar">
<div class="container">
<div class="top-left">
<?php if ( get_field( 'header_address', 'option' ) ) : ?>
<h6>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 14C14.206 14 16 12.206 16 10C16 7.794 14.206 6 12 6C9.794 6 8 7.794 8 10C8 12.206 9.794 14 12 14ZM12 8C13.103 8 14 8.897 14 10C14 11.103 13.103 12 12 12C10.897 12 10 11.103 10 10C10 8.897 10.897 8 12 8Z" fill="#FF6600"/>
<path d="M11.4201 21.814C11.5894 21.9346 11.7922 21.9994 12.0001 21.9994C12.208 21.9994 12.4107 21.9346 12.5801 21.814C12.8841 21.599 20.0291 16.44 20.0001 10C20.0001 5.589 16.4111 2 12.0001 2C7.58909 2 4.00009 5.589 4.00009 9.995C3.97109 16.44 11.1161 21.599 11.4201 21.814ZM12.0001 4C15.3091 4 18.0001 6.691 18.0001 10.005C18.0211 14.443 13.6121 18.428 12.0001 19.735C10.3891 18.427 5.97909 14.441 6.00009 10C6.00009 6.691 8.69109 4 12.0001 4Z" fill="#FF6600"/>
</svg>
</span>
<?php the_field( 'header_address', 'option' ); ?>
</h6>
<?php endif; ?>
<?php if ( get_field( 'header_hours', 'option' ) ) : ?>
<h6>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 22.5C9.9233 22.5 7.89323 21.8842 6.16652 20.7304C4.4398 19.5767 3.09399 17.9368 2.29927 16.0182C1.50455 14.0996 1.29661 11.9884 1.70176 9.95155C2.1069 7.91475 3.10693 6.04383 4.57538 4.57538C6.04383 3.10693 7.91476 2.1069 9.95156 1.70176C11.9884 1.29661 14.0996 1.50455 16.0182 2.29927C17.9368 3.09399 19.5767 4.4398 20.7304 6.16651C21.8842 7.89323 22.5 9.9233 22.5 12C22.5 14.7848 21.3938 17.4555 19.4246 19.4246C17.4555 21.3938 14.7848 22.5 12 22.5ZM12 3C10.22 3 8.47992 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91132 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89472 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C21 9.61305 20.0518 7.32387 18.364 5.63604C16.6761 3.94821 14.387 3 12 3Z" fill="#FF6600"/>
<path d="M15.4425 16.5L11.25 12.3075V5.25H12.75V11.685L16.5 15.4425L15.4425 16.5Z" fill="#FF6600"/>
</svg>
</span>
<?php the_field( 'header_hours', 'option' ); ?>
</h6>
<?php endif; ?>
</div>
<div class="top-right">
<?php if ( get_field( 'header_phone', 'option' ) ) : ?>
<h6>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13 2C15.3869 2 17.6761 2.94821 19.364 4.63604C21.0518 6.32387 22 8.61305 22 11M13 6C14.3261 6 15.5979 6.52678 16.5355 7.46447C17.4732 8.40215 18 9.67392 18 11M13.832 16.568C14.0385 16.6628 14.2712 16.6845 14.4917 16.6294C14.7122 16.5744 14.9073 16.4458 15.045 16.265L15.4 15.8C15.5863 15.5516 15.8279 15.35 16.1056 15.2111C16.3833 15.0723 16.6895 15 17 15H20C20.5304 15 21.0391 15.2107 21.4142 15.5858C21.7893 15.9609 22 16.4696 22 17V20C22 20.5304 21.7893 21.0391 21.4142 21.4142C21.0391 21.7893 20.5304 22 20 22C15.2261 22 10.6477 20.1036 7.27208 16.7279C3.89642 13.3523 2 8.7739 2 4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H7C7.53043 2 8.03914 2.21071 8.41421 2.58579C8.78929 2.96086 9 3.46957 9 4V7C9 7.31049 8.92771 7.61672 8.78885 7.89443C8.65 8.17214 8.44839 8.41371 8.2 8.6L7.732 8.951C7.54842 9.09118 7.41902 9.29059 7.36579 9.51535C7.31256 9.74012 7.33878 9.97638 7.44 10.184C8.80668 12.9599 11.0544 15.2048 13.832 16.568Z" stroke="#FF6600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<?php
$phone = get_field( 'header_phone', 'option' );
if ( $phone ) :
$phone_link = preg_replace( '/\s+/', '', $phone );
?>
<a href="tel:<?php echo esc_attr( $phone_link ); ?>">
<?php echo esc_html( $phone ); ?>
</a>
<?php endif; ?>
</h6>
<?php endif; ?>
</div>
</div>
</div>
<!-- Main Header -->
<div class="main-header">
<div class="container">
<div class="logo">
<?php
$logo = get_field( 'header_logo', 'option' );
if ( $logo ) :
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_url( $logo['url'] ); ?>" alt="<?php echo esc_attr( $logo['alt'] ); ?>">
</a>
<?php endif; ?>
</div>
<?php
wp_nav_menu(
[
'theme_location' => 'primary_menu',
'menu_class' => 'main-menu',
'container' => false,
'items_wrap' => '<div class="main-menu"><ul>%3$s</ul></div>',
]
);
?>
<!-- Mobile Toggle -->
<button class="custom-menu-toggle" id="customMenuToggle">
☰ </button>
<!-- Mobile Menu Wrapper -->
<div class="custom-mobile-menu" id="customMobileMenu">
<button class="custom-menu-close" id="customMenuClose">×</button>
<?php
wp_nav_menu(
[
'theme_location' => 'primary_menu',
'container' => false,
'menu_class' => 'custom-menu-list mobile-menu',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
]
);
?>
</div>
<div class="custom-btn">
<a href="<?php the_field( 'header_button_url', 'option' ); ?>">
Book Now
</a>
</div>
</div>
</div>
</header>