Jump to content

1.6.0.5 Responsive Theme Sorting out the Header.


Recommended Posts

I'm working on a new install of Prestashop 1.6.0.5 and am making a new theme based off the default-bootstrap theme.  I see a few issues with the default theme when you resize the browser and i'm currently working on DisplayNav <nav>.  if you see in the attachments the nav shifts down to a second line and it looks funky.  i think i can sort out the firs shift but after that i'm lost.  please read and see if you can offer suggestions.

 

what i did:

i moved the search and cart up there by transplanting the modules to the DisplayNav, then Removed the Hooks from the Display Top but not the DisplayHeader. (Question #1, is that valid way to do it? i read that i should be leaving things in the DisplayHeader and DisplayTop?)

 

my perferred solution would be to fix this in CSS so i can have a computer, tablet, and mobile page.

 

i guess i'm looking for suggestions.  i just dont like how it looks as i shrink down the page and the Contact Us and other things start to overlap eachother.  i would be fine with them just be centered and ontop of eachother.

 

i'm guessing i dont fully understand the class="col-sm-4 clearfix" and other similar to it.

 

*edit*

if you want to see the live page, just let me know your ip so i can add it to the maintenance ip list.  the URL is www.cigarbandsunlimited.com

post-488846-0-80096200-1396720490_thumb.png

post-488846-0-84424000-1396720491_thumb.png

post-488846-0-43575900-1396720493_thumb.png

post-488846-0-62175400-1396720494_thumb.png

Edited by tonycajjo (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

i guess it's just a matter of sorting out CSS, and modifying the .tpl to suit my needs.  i got it so they dont overlap and just carry onto the next line which is fine for mobile pones, i'll use some @media CSS rules to refine it as needed.  to anyone out there that is trying to sort out their theme i would suggest the following:

 

edit elements of tpl files by adding an ID or Class, then using firebug on that class to tweak that element, last thing you want to do is mess up something else down the page.

 

use the /* comment */ to block out a lot of the @media restrictions.  and anything else you think you dont need.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More