Page 1 of 1
Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 1:10 am
by celticgi
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.
Re: Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 2:16 am
by celticgi
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.
Re: Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 2:37 am
by cyclops12
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
Re: Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 3:06 am
by celticgi
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.
Re: Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 3:55 am
by cyclops12
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
Re: Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 4:02 am
by celticgi
What can I say Cyclops. Thank you so much. Really great and very much appreciated.
Warm Regards.
Re: Move search to top NAV menu and center Logo below it
Posted: Mon Feb 13, 2017 4:07 am
by cyclops12
Glad to be of help
Re: Move search to top NAV menu and center Logo below it
Posted: Tue Feb 14, 2017 3:51 am
by celticgi
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%;
}
Re: Move search to top NAV menu and center Logo below it
Posted: Wed Feb 15, 2017 4:56 am
by cyclops12
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!
Re: Move search to top NAV menu and center Logo below it
Posted: Wed Feb 15, 2017 7:07 am
by celticgi
Thanks Cyclops. It worked. Thanks again.
Re: Move search to top NAV menu and center Logo below it
Posted: Fri Nov 16, 2018 11:46 pm
by uksimon
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?
Re: Move search to top NAV menu and center Logo below it
Posted: Sat Nov 17, 2018 1:28 am
by cyclops12
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
Re: Move search to top NAV menu and center Logo below it
Posted: Sat Nov 17, 2018 2:40 am
by uksimon
Ah I See. Thanks for your reply.
Don't suppose you know the way to achieve the same result on 3.0.2.0?
Re: Move search to top NAV menu and center Logo below it
Posted: Sat Nov 17, 2018 3:17 am
by cyclops12
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
Re: Move search to top NAV menu and center Logo below it
Posted: Sat Nov 17, 2018 4:47 am
by uksimon
Thank you very much.
Really appreciated.
Re: Move search to top NAV menu and center Logo below it
Posted: Sun Apr 07, 2019 4:29 pm
by henfeb
works great thank you
Re: Move search to top NAV menu and center Logo below it
Posted: Mon May 30, 2022 11:12 pm
by ab7489658@gmail.com
Hi Cyclops12 or anyone else on the forum do you perhaps have an ocmod for 3.0.3.8? but one to move the logo and search to the top menu. And have the logo centred.
Thanks
Re: Move search to top NAV menu and center Logo below it
Posted: Fri Mar 10, 2023 7:30 pm
by LgJJ
I would also love to have the search bar moved in 3.0.3.8 please
Re: Move search to top NAV menu and center Logo below it
Posted: Sat Mar 11, 2023 12:38 am
by by mona
edited vqmod by cyclops for OC3
all the above comments remain the same