Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 General
 CSS and Responsive Designs
 Floating nav menu
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

jonukrah
Starting Member

United Kingdom
19 Posts

Pre-sales questions only
(More Details...)

Posted - 05/15/2019 :  05:32:57  
I am having an issue trying to set the javascript navbar to float when scrolling as at the moment, on mobile screens Its just rolling off up and people can find any way to navigate. And pointers would be appreciated

dbdave
ECT Moderator

USA
8023 Posts

Posted - 05/15/2019 :  06:11:15  
How are you doing that?
I have used position: sticky; (css) and really like it.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

jonukrah
Starting Member

United Kingdom
19 Posts

Pre-sales questions only
(More Details...)

Posted - 05/15/2019 :  06:34:52  
which class are you setting to float? i i just trying to do it with navtab, do i need to set it higher up the chain?

Andy
Administrator

95440 Posts

Posted - 05/15/2019 :  07:01:28  
Hi

I haven't used David's method but if you can put your URL in your forum profile it should help diagnose.

Andy

Please feel free to review / rate our software

dbdave
ECT Moderator

USA
8023 Posts

Posted - 05/15/2019 :  16:46:01  
HTML
<div class="menu">
~~menu code~~
</div>

css
div.menu {
position: -webkit-sticky;
position: sticky;
top: 0;
}

I can test this is a bit, but it should be something like that.
NOTE - If by chance, it's table row, sticky does not work.

Edited by - dbdave on 05/15/2019 16:47:39

jonukrah
Starting Member

United Kingdom
19 Posts

Pre-sales questions only
(More Details...)

Posted - 05/15/2019 :  18:02:38  
I can get it to work in normal circumstances, but its on the dynamic layout im getting lost. Have a look at www.ballbodyclips.co.uk and shrink screen down to phone size and you'll see my issues. I want the box to stay in top right so after scrolling so its easy too see. We have a stupid high bounce rate and i suspect its in part due to people loosing the nav menu! thanks for looking at this guys!

dbdave
ECT Moderator

USA
8023 Posts

Posted - 05/15/2019 :  21:10:57  
I did look at your site, and I see what you mean.
The menu does seem to work on smaller screens, but my personal opinion is the site could address a few things.
On smaller views, you have quite a bit going on up top with no content showing on the screen.
I would consider reducing the large space there and get some good content above the fold.
Some people do not scroll down unless they can see something enticing them to do so.
I think the colors are hard on the eyes, and you might want to tone it down a bit. Sure, use the green and orange colors, but sparingly. (Just my opinion).

I expect Andy will be along shortly and maybe he is familiar with that menu you have and can offer some help with that.
Being (what looks like) a javascript menu, I am not sure the css sticky tip will work.

quadrant
Ecommerce Template Expert

United Kingdom
935 Posts

Pre-sales questions only
(More Details...)

Posted - 05/15/2019 :  23:30:38  
Hi,

At line 337 in style.css you have:
.sticky {
position: static;
}

which is overriding:
position: fixed;
around line 125.

Try removing position: static; at it should stay at the top when scrolling on mobile.

Regards,
David

jonukrah
Starting Member

United Kingdom
19 Posts

Pre-sales questions only
(More Details...)

Posted - 05/16/2019 :  06:15:13  
Thanks David, its always something simple isnt it lol!

I will look more at the content for phones, but im afraid the colours are set in stone buy the person who I admin for. I am working on putting a lot more content up as they are focused on one range online when and they have a whole warehouse full of tools, nut bolts etc but are afraid of the smaller margins on internet sales.

dbdave
ECT Moderator

USA
8023 Posts

Posted - 05/16/2019 :  12:20:23  
quote:
colours are set in stone buy the person who I admin for.


When they ask why the bounce rate is so high, remind them of this.

V45
Advanced Member

United Kingdom
416 Posts

Pre-sales questions only
(More Details...)

Posted - 05/17/2019 :  17:34:52  
[quote]colours are set in stone buy the person who I admin for.[/quote]

That may be the case but many factors need taking into consideration, colour blindness for one. Remember, colour sells & the right colours sell better. Online certain colours promote trust, blue for example. That's why the majority of financial service websites are blue based as well as Facebook, Twitter, PayPal etc etc. Ideally you need to be getting the site owner to understand the psychological effects of colour.

IMHO, the colour scheme is horrendous. First impressions count. As dbdave has pointed out, those colours could be a big turn off & are most likely are a big turn off.

Go with the old adage Less is more & one won't go far wrong

I'd also recommend grabbing a copy of the book Webs of Influence, the psychology of online persuasion by the British web psychologist, Nathalie Nahai.


Will - Bolton Manchester UK

Edited by - V45 on 05/17/2019 19:25:13

jonukrah
Starting Member

United Kingdom
19 Posts

Pre-sales questions only
(More Details...)

Posted - 05/20/2019 :  07:08:50  
I have had this conversation but he is very stubborn, i plan to do another more traditional scheme in another folder this week and have some of ads going to that and see if results will change his mind!!

I have another small issue i cant track down, on http://www.ballbodyclips.co.uk/products.php the border around each product isnt where it should be, I give up after 2 hours making things worse and i guess someone here know the answer off top of their head! Thanks in advance!

Andy
Administrator

95440 Posts

Posted - 05/20/2019 :  07:42:04  
You have the border set on the product image div

div.prodimage{
padding: 18px;
text-align: center;
border: 1px solid #CB5100;
}

div.prodimage:hover{
border: 2px solid #416F2C;
}

You probably want to remove those highlighted lines and then may be set the border on div.product.

The alternative would be to add float:left on the dv.prodimage class

Andy


Please feel free to review / rate our software

jonukrah
Starting Member

United Kingdom
19 Posts

Pre-sales questions only
(More Details...)

Posted - 05/20/2019 :  08:45:58  
Thanks andy!
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000