Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
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 Previous Topic Topic Next Topic  

jonukrah
Starting Member

United Kingdom
19 Posts

Posted - 05/15/2019 :  05:32:57  Show Profile
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
7798 Posts

Posted - 05/15/2019 :  06:11:15  Show Profile
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
Go to Top of Page

jonukrah
Starting Member

United Kingdom
19 Posts

Posted - 05/15/2019 :  06:34:52  Show Profile
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?
Go to Top of Page

Andy
Administrator

95208 Posts

Posted - 05/15/2019 :  07:01:28  Show Profile
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
Go to Top of Page

dbdave
ECT Moderator

USA
7798 Posts

Posted - 05/15/2019 :  16:46:01  Show Profile
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
Go to Top of Page

jonukrah
Starting Member

United Kingdom
19 Posts

Posted - 05/15/2019 :  18:02:38  Show Profile
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!
Go to Top of Page

dbdave
ECT Moderator

USA
7798 Posts

Posted - 05/15/2019 :  21:10:57  Show Profile
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). Wink

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.
Go to Top of Page

quadrant
Ecommerce Template Expert

United Kingdom
930 Posts

Posted - 05/15/2019 :  23:30:38  Show Profile
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
Go to Top of Page

jonukrah
Starting Member

United Kingdom
19 Posts

Posted - 05/16/2019 :  06:15:13  Show Profile
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.
Go to Top of Page

dbdave
ECT Moderator

USA
7798 Posts

Posted - 05/16/2019 :  12:20:23  Show Profile
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. Wink
Go to Top of Page

V45
Advanced Member

United Kingdom
411 Posts

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


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
Go to Top of Page

jonukrah
Starting Member

United Kingdom
19 Posts

Posted - 05/20/2019 :  07:08:50  Show Profile
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!
Go to Top of Page

Andy
Administrator

95208 Posts

Posted - 05/20/2019 :  07:42:04  Show Profile
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
Go to Top of Page

jonukrah
Starting Member

United Kingdom
19 Posts

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