Fix stacked icons in Main Header on WordPress site using php? - php

Question

Disclaimer:
My knowledge about coding and website development is basic and self-tought. I do not know what i am doing and will likely not understand your answer.
Situation:
I am developing a website (e-commerce) using WordPress (woocommerce) and am using a theme (Shopkeeper) which I am not willing to abandon given the amount of work put into it already. Nevertheless, I am stuck on a major layout problem with the website's main header.
Shopkeeper theme comes with 5 default main header layouts. None of which achieve what I want. I have selected the layout most closest to what I want (Layout 5).
The header consists of 2 parts:
Logo [Part_1]
Tool icons (whishlist, cart, account and search) [Part_2]
As of right now, [Part_1] and [Part_2] are one monolithic group that I cannot move independently. I want to achieve that Layout 5 goal and have them positioned in separate places.
Failed attempt:
My approach was to dig through the Theme files and find the source code for Layout 5 to change it (given that Shopkeeper Theme does not provide the user with the option to create or modify existing Layouts through the UI). I have found the code below which is contained in the header-centered-menu-under.php file:
Original code corresponding to Layout 5
<?php
$header_width = ( 'full' === Shopkeeper_Opt::getOption( 'header_width', 'custom' ) ) ? 'full-header-width' : 'custom-header-width';
$mobile_class = wp_is_mobile() ? 'is-mobile' : '';
?>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="row">
<div class="site-header-wrapper <?php echo esc_attr($mobile_class); ?>">
<div class="site-branding">
<?php shopkeeper_get_logo(); ?>
</div>
<div class="menu-wrapper <?php echo esc_attr($mobile_class); ?>">
<?php if( !wp_is_mobile() ) { ?>
<?php shopkeeper_get_menu( 'show-for-large main-navigation default-navigation', 'main-navigation', 1 ); ?>
<?php } ?>
<div class="site-tools">
<?php echo shopkeeper_get_header_tool_icons(); ?>
</div>
</div>
</div>
</div>
</header>
I have proceeded to change the code as to have two "independent" Parts. This is what I came up with:
Modified code corresponding to Layout 5 modified
<?php
$header_width = ( 'full' === Shopkeeper_Opt::getOption( 'header_width', 'custom' ) ) ? 'full-header-width' : 'custom-header-width';
$mobile_class = wp_is_mobile() ? 'is-mobile' : '';
?>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="site-header-wrapper <?php echo esc_attr($mobile_class); ?>">
<div class="site-branding">
<?php shopkeeper_get_logo(); ?>
</div>
</div>
</header>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="menu-wrapper <?php echo esc_attr($mobile_class); ?>">
<?php if( !wp_is_mobile() ) { ?>
<?php shopkeeper_get_menu( 'show-for-large main-navigation default-navigation', 'main-navigation', 1 ); ?>
<?php } ?>
<div class="site-tools">
<?php echo shopkeeper_get_header_tool_icons(); ?>
<style>
.site-tools {
position: relative;
margin-top: 1%;
margin-left: 70%;
}
</style>
</div>
</div>
</header>
Problem:
While I seem to have achieved separating [Part_1] from [Part_2] and placed [Part_2] more or less where I wanted, I now have 2 new issues with my Layout 5 modified:
the icons are now stacked (as opposed to their horizontal alignment before the change)
the icons are now preceded by a bullet
What have I done wrong and how can I have the icons aligned horizontally without the bullets ?