Front-page.php url slug

Question

I have a very simple question. I'm building a very small and basic website where I have coded a simple menu. I want the current page from the menu to be highlighted in yellow.

In order to do that, I have added an if statement that looks for the url slug and it is true, to add the CSS class to that particular HTML element.

Works fine for 'service' and 'about-us' but what about the home page? What URL slug do I use for that? In addition my 'index' url slug is not working for whatever reason.

note: the class "modern" is CSS trigger to change the color.

 <ul class="list-inline">
            <!-- empty site_url() will default to front-page.php -->
            <li class="list-inline-item modern"><a href="<?php echo site_url()?>" class="text-white lead"><h3 class="menu-items <?php if (is_page('http://modern-artisans--carpentry-version.local/')) echo "modern"?>">home</h3></a></li>
            <li class="list-inline-item"><a href="<?php echo site_url('/services')?>" class="text-white lead"><h3 class="menu-items <?php if (is_page('services')) echo "modern"?>">services</h3></a></li>
            <li class="list-inline-item"><a href="<?php echo site_url('/about-us')?>" class="text-white lead"><h3 class="menu-items <?php if (is_page('about-us')) echo "modern"?>">about us</h3></a></li>
            <li class="list-inline-item"><a href="<?php echo site_url('/index')?>" class="text-white lead"><h3 class="menu-items <?php if (is_page('index')) echo "modern"?>">work history</h3></a></li>
          </ul>

Answer 1

You should be able to achieve this by using is_front_page() which returns a boolean. You can place that in your if statement in the menu.

https://developer.wordpress.org/reference/functions/is_front_page/