resolvedSimilar 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
Ismael
Moderator
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
Hi Ismael,
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.
Ismael
Moderator
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
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
Ismael
Moderator
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
Ismael
Moderator
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
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
