Link not clickable in WordPress Menu but can be opened in a new tab

Disclaimer: I am sorry the post looks too big but I just thought I should provide all the details. I am sure the issue is something very stupid but I am not able to figure out 🙁

Background: I am creating a wordpress site using an awesome theme called Parallax from Access Press. I wanted to play out my business website before buying the pro version so decided to make a few changes myself.

Problem: You can either use the theme’s menu (which allows animation and same page scroll; This Golum wantses) or use native wordpress menus (which does not allow scrolling; Golum hateses).

Workaround Tried: I figured I can go into the header.php and add one menu item manually. So following is the code per my understanding:

<nav id="site-navigation" class="main-navigation">
        <div class="menu-toggle"><?php _e( 'Menu', 'accesspress_parallax' ); ?></div>

            <?php 
            $sections = of_get_option('parallax_section');
            if(of_get_option('enable_parallax') == 1 && of_get_option('enable_parallax_nav') == 1):
            ?>
            <ul class="nav single-page-nav">
                <?php
                $home_text = of_get_option('home_text');
                if(of_get_option('show_slider')== "yes" && !empty($home_text)) : ?>
                    <li class="current"><a href="<?php echo esc_url( home_url( '/' ) ); ?>#main-slider"><?php echo esc_attr($home_text); ?></a></li>

                <?php endif;

                if(!empty($sections)):
                foreach ($sections as $single_sections): 
                    if($single_sections['layout'] != "action_template" && $single_sections['layout'] != "blank_template" && $single_sections['layout'] != "googlemap_template" && !empty($single_sections['page'])) :
                    $title = get_the_title($single_sections['page']); ?>
                    <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#section-<?php echo $single_sections['page']; ?>"><?php echo $title; ?></a></li>
                    <?php 
                    endif;
                endforeach; 
                endif; ?>
                    <li><a href="http://google.com" target="_self">Pre-order Here</a></li>
            </ul>
            <?php   
            else: 
                <some more code that picks custom menu if you choose to skip parallax menu>

        </nav>

The first LI item just puts the text ‘Home’ in the page. Second one picks all the values from parallax menu. The Last LI item is the one I have included.

                <li><a href="http://google.com" target="_self">Pre-order Here</a></li>

Behavior: This perfectly adds the item to the menu and also appears to be clickable. The problem is – when it is clicked, it does nothing. If I right click it and open in a new tab, it works perfectly fine. Including related CSS below for your reference

Edit: If I include a link to another section of the page. it works. Example: http://domain.com/#section-20

.main-navigation {
    float: right;
    max-width: 80%;
    margin-top: 15px;
}
.logo-top .main-navigation{
    float: none;
    width: auto;
    text-align: center;
    max-width: none;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: inline-block;
}
.main-navigation ul li{
    position: relative;
}
.main-navigation > ul > li {
    float: left;
    position: relative;
    font-family: 'Oxygen', sans-serif;  
    font-weight: 400;
}
.main-navigation > ul > li > a{
    text-transform: uppercase;
    font-size:14px;
    padding: 5px 15px;
}
.main-navigation > ul > li.current a{
    color: #E66432;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color:#333;
}
.main-navigation ul ul {
    background: #FFF;
    position: absolute;
    top: 100%;
    left:0;
    z-index: 99999;
    padding:0 10px;
    font-size: 15px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    display: none;
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}
.main-navigation ul ul a {
    min-width: 200px;
}
.main-navigation ul ul li {
    border-bottom: 1px solid #EEE;
    padding: 8px 0;
}
.main-navigation ul ul li:last-child{
    border:none;
}
.main-navigation li:hover > a {
    color: #E66432;
}
.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a {
    color: #E66432;