Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #15556

    Similar to the shopping cart image, I have a truck image which symbolizes shipping that i want to add on the header section with a link right next to it that says Free Shipping within Hong Kong. Can you please help advice how to insert the image and link close to the submenu area?

    EXAMPLE-

    (TRUCK PHOTO) Free Shipping

    within Hong Kong

    #87980

    Hi,

    Open header.php and find this code.

    $args = array('theme_location'=>'avia2', 'fallback_cb' => '');
    if(avia_woocommerce_enabled()) $args['fallback_cb'] ='avia_shop_nav';
    wp_nav_menu($args);
    echo "</div>";

    Replace it with this

    $args = array('theme_location'=>'avia2', 'fallback_cb' => '');
    if(avia_woocommerce_enabled()) $args['fallback_cb'] ='avia_shop_nav';
    wp_nav_menu($args);
    echo '<div class="free"><img src="IMG SOURCE" /> Free Shipping within Hong Kong</div>';
    echo "</div>";

    We added a new div with a class of free. On your custom.css, add this styles.

    .sub_menu {
    top: -24px;
    width: 500px;
    }

    .free {
    position: relative;
    float: left;
    }

    Adjust the values.

    Cheers,

    Ismael

    #87981

    Hi Ismael,

    URL: http://www.possmma.us

    I did according to your instructions but still found a few problems which i need your assistance with.

    - The text “Free shipping in Hong Kong” is very hard to see. Can i make it in bold in red color font and be able to click on the words so that it jumps to another page with details about the free shipping in Hong Kong

    – As mention above, i have a photo of a truck which i would like to add next to the words (similar to shopping cart photo), where can i add this image?

    – I added the CSS codes and tried to adjust it correctly but was having trouble with it as well. Can you please show me how i can adjust it like this layout? (Truck Image) (Free Shipping Within Hong Kong) (Submenu)

    Thank you for your help.

    #87982
    #87983

    please help admin.

    #87984

    Hi,

    I think there is something wrong the snippet. Replace it with this.

    echo '<div class="sub_menu">';
    $args = array('theme_location'=>'avia2', 'fallback_cb' => '');
    echo '<div class="free"><img src="IMG SOURCE" /> Free Shipping within Hong Kong</div>';
    if(avia_woocommerce_enabled()) $args['fallback_cb'] ='avia_shop_nav';
    wp_nav_menu($args);
    echo "</div>";

    Now, remove all of the css modifications that I gave you and replace those with this.

    .sub_menu {
    top: -60px;
    width: 500px;
    }

    .free {
    position: relative;
    float: left;
    }

    .free img {
    float: left;
    width: 100px;
    height: 40px;
    }

    Please try to adjust it. It’s not perfect but it will give you something to start with.

    Regards,

    Ismael

    #87985

    Ismael,

    3 questions-

    1. How can i get the “Free shipping within Hong Kong” to be aligned evenly with sub menu? I tried all different mods on the CSS but was only able to get them to reposition together as a whole.

    2. How can i change the font color, or make it bold?

    3. How can i get it to be set it where users can click on it where another page shows up with details about shipping?

    Thank you

    #87986

    still waiting for a reply. pls help

    #87987

    still waiting for reply. pls help

    #87988

    can admin please help address this issue?

    #87989

    Hi vsit,

    For #1 and #2, Try to add this code in Quick CSS or custom.css:

    .free img {
    margin-right: 10px;
    }

    .free {
    color: white;
    font-weight: bold;
    margin-top: -5px;
    }

    You can adjust the margin-top value.

    For #3, Do you want the “Free shipping within Hong Kong” to be a link?

    Regards,

    Ismael

    #87990

    Yes for #3 how can i set it to be a link? I would like to connect it to the page i currently have display on footer as customer services.

    #87991

    i would really appreciate it if admin can reply so we can finalize this editing.

    #87992

    Hi vsit,

    On this code snippet:

    echo '<div class="sub_menu">';
    $args = array('theme_location'=>'avia2', 'fallback_cb' => '');
    echo '<div class="free"><img src="IMG SOURCE" /> Free Shipping within Hong Kong</div>';
    if(avia_woocommerce_enabled()) $args['fallback_cb'] ='avia_shop_nav';
    wp_nav_menu($args);
    echo "</div>";

    Find:

    echo '<div class="free"><img src="IMG SOURCE" /> Free Shipping within Hong Kong</div>';

    And replace it with:

    echo '<div class="free"><img src="IMG SOURCE" /> <a href="your_link_here">Free Shipping within Hong Kong</a></div>';

    Just replace the your_link_here with the link you want. :)

    Regards,

    Ismael

    #87993

    Yes, Thank you very much.

    #87994

    Hey,

    Glad we could help.

    Regards,

    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Help adding a shipping truck image on header next to submenu’ is closed to new replies.