Post by celticgi » Mon Feb 13, 2017 1:10 am

Hi - I have upgraded to 2.3.0.2 and would like to move the search lookup from the header to the top NAV menu - beside the currency - also and center the logo below it. Ive tried to play around with the header.tpl but I am having no luck. Can anyone help. Greatly appreciated.

New member

Posts

Joined
Tue Feb 05, 2013 8:18 am

Post by celticgi » Mon Feb 13, 2017 2:16 am

I managed to center the logo - so just need to move the search lookup to the top NAV menu. I'm using the default templates so any help would be greatly appreciated.

Thanks.

New member

Posts

Joined
Tue Feb 05, 2013 8:18 am

Post by cyclops12 » Mon Feb 13, 2017 2:37 am

You could use this little ocmod to save altering any core files.
This will show the search box in top nav and will hide the original search box position.
You may need to do some css adjustments to make it look nice :)
Just install using the Extension Installer and click refresh in modifications

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by celticgi » Mon Feb 13, 2017 3:06 am

Hi Cyclops. Your a star - thanks so much - worked great. If I wanted to move the (black) cart there also - so that the logo looks clean on its own- how could I move that to the NAV also? Sorry to be a pain - I should have stated that.

Really appreciate your help.

New member

Posts

Joined
Tue Feb 05, 2013 8:18 am

Post by cyclops12 » Mon Feb 13, 2017 3:55 am

You can move both but you would have to reduce their size if you are using all default links in nav

Just remove that last ocmod and use this new one

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by celticgi » Mon Feb 13, 2017 4:02 am

What can I say Cyclops. Thank you so much. Really great and very much appreciated.

Warm Regards.

New member

Posts

Joined
Tue Feb 05, 2013 8:18 am

Post by cyclops12 » Mon Feb 13, 2017 4:07 am

Glad to be of help ;)

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by celticgi » Tue Feb 14, 2017 3:51 am

Hi Cyclops (or anyone else). Just on the logo. I centered using the below code.

However, when I view on a mobile it creates a huge gap (scrolling down over 10 times before I get to the categories). On an iPAD its is showing to the left. Is there a better way to center the logo image so that it adjusts responsively?

Many thanks.

Code: Select all

#logo {
	margin: 0 0 10px 0;
	height: 100%;
        position: relative;
        left:470px;
}
#logo img{
   width: auto;
   max-height: 100%; 
   height: 50%;
}

New member

Posts

Joined
Tue Feb 05, 2013 8:18 am

Post by cyclops12 » Wed Feb 15, 2017 4:56 am

Have you tried putting the logo code within "@media"
Something like
@media (min-width: 768px) {
#logo {
margin: 0 0 10px 0;
height: 100%;
position: relative;
left:470px;
}
#logo img{
width: auto;
max-height: 100%;
height: 50%;
}
}
Dont know whats going on with this forum but half the buttons are not working and wont let me put the code in using the code button!

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by celticgi » Wed Feb 15, 2017 7:07 am

Thanks Cyclops. It worked. Thanks again.

New member

Posts

Joined
Tue Feb 05, 2013 8:18 am

Post by uksimon » Fri Nov 16, 2018 11:46 pm

I have tried using this mod on 3.0.2.0 and it doesnt do anything. Ive refreshed cache and tried on a different browser but it remains exactly the same. Any ideas?

Newbie

Posts

Joined
Fri Nov 16, 2018 8:19 am

Post by cyclops12 » Sat Nov 17, 2018 1:28 am

uksimon wrote:
Fri Nov 16, 2018 11:46 pm
I have tried using this mod on 3.0.2.0 and it doesnt do anything. Ive refreshed cache and tried on a different browser but it remains exactly the same. Any ideas?
Thats because this was made for 2.3.0.2 version which is quite a bit different to 3.0.2.0 version

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by uksimon » Sat Nov 17, 2018 2:40 am

Ah I See. Thanks for your reply.

Don't suppose you know the way to achieve the same result on 3.0.2.0?

Newbie

Posts

Joined
Fri Nov 16, 2018 8:19 am

Post by cyclops12 » Sat Nov 17, 2018 3:17 am

If you have vqmod installed then you could use this mod attached

You also will need to make 2 adjustments to catalog/view/javascript/common.js file
Open the file and find

Code: Select all

var value = $('header #search input[name=\'search\']').val();
and change it to

Code: Select all

var value = $('nav #search input[name=\'search\']').val();
Then find

Code: Select all

$('header #search input[name=\'search\']').parent().find('button').trigger('click');
and change it to

Code: Select all

$('nav #search input[name=\'search\']').parent().find('button').trigger('click');
hope this helps
You may have to change the col values (in the attahced vqmod)depending on what you are displaying in your top menu

Attachments


Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by uksimon » Sat Nov 17, 2018 4:47 am

Thank you very much.

Really appreciated.

Newbie

Posts

Joined
Fri Nov 16, 2018 8:19 am

Post by henfeb » Sun Apr 07, 2019 4:29 pm

works great thank you

Newbie

Posts

Joined
Thu Apr 04, 2019 7:30 am
Who is online

Users browsing this forum: No registered users and 10 guests