PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

Problem with Affinity menu in smartphone view

(25 posts) (4 voices)

Started 9 years ago by VL Branko
Latest reply from VL Branko

12 Next »

VL Branko

offline
Member

I am making a template using Affinity. I am having a problem when it is in smartphone size.

If I approximate the smartphone viewport by shrinking the browser I discovered one problem which may affect others. That being that if a menu item has submenus I can view them by clicking the arrow and it opens up the submenus. But, if I click on the arrow to close the submenus instead of closing the submenus it goes to the link associated with the parent menu.

More important is that when I actually opened the site in my Samsung Galaxy Grand the contents from the header bled into the menu causing it not to function at all.

Here is a link to the page I am working on.

file:///Users/mycomputer/Sites/jyotish_export_2_DW_2011_01_28/test.html

Posted 9 years ago
VL Branko

offline
Member

The menu tab with many choices was "resources" so I tried to eliminate the problem by not putting a link to the "resources" since the sub-menus have links to all the pages listed on that page. This seems to work when I shrink the browser, but there is one problem that being that when I open the page the "resources" tab is highlighted and all sub-menus displayed. When I shrink the page and open the menus then the "resources" tab is already opened. I really don't want that. Any suggestions?

Posted 9 years ago
VL Branko

offline
Member

Ok I fixed the second (main) problem of the contents from header overflowing onto the menu and stopping it functioning by setting the CSS for the container that held those contents to "overflow auto."

However there is still the other problem of the resources tab letting it all hang out so to speak. (-:

Posted 9 years ago
Al Sparber

offline
PVII Team

file:///Users/mycomputer/Sites/jyotish_export_2_DW_2011_01_28/test.html is a link to a page on your hard drive.

Posted 9 years ago
VL Branko

offline
Member

Sorry for that, just another symptom of how things are not going well today. Here is the link http://www.shyamasundaradasa.com/test.html

I also found another problem caused by putting stuff in the masthead, it causes a space to appear to the right of the screen. This is found on both desktop and phones. Here is a link to an image of it.

https://dl.dropboxusercontent.com/u/70260139/Screen%20shot%202013-05-05%20at%2012.07.49%20AM.png

The space seems to be exactly the width of the icon image on the far left. However the problem seems to be coming from the container holding the text.

I have the width set to auto. If set the width to 600 it fixes the problem on the desktop but really messes up the smartphone because now the text keeps going to the right. Finally as I was typing this I thought to set the width to a percentage after a little experimentation I found that a width of 85% solved the problem. Whew!

You probably knew that was the answer to that problem. (-:

So now it just seems to be the issue of what to do with the sub-menus as mentioned in previous text.

If I assign a link value to resources then it stays closed until moused over or smartphone clicked and arrow opens down, but if I click on the arrow on the smart phone it certainly closes the sub-menus but also takes me to another page when all I wanted to do was close the menu.

You can see the same thing on this site http://www.pilatesintuition.co.uk if you try to close any of the open sub-menus by clicking on the arrow of the parent menu it does close but then takes you to the parent menu.

Posted 9 years ago
VL Branko

offline
Member

As requested I supplied a link to the page http://www.shyamasundaradasa.com/test.html

Posted 9 years ago
Sinclair

offline
Member

I think it's best not to use top level triggers with sub menus as links to pages, leave the link path for those, the default # (dummy link).

btw: to eliminate those scrollbars up in the mashead area when the browser is made smaller - you might try replacing.....

.masthead {
padding: 10px;
text-align: left;
background-color: #252e49;
position: relative;
z-index: 10;
box-shadow: 0px 0px 30px #000;
height: 81px;
}

With these.....

.masthead {
padding: 10px 10px 20px 10px;
text-align: left;
background-color: #252e49;
position: relative;
z-index: 10;
box-shadow: 0px 0px 30px #000;
color: #6C5F55;
font-family: "Albertus Medium", Verdana, Arial;
}
.masthead img {float:left; margin-right:10px}

....and remove....

.myname {
font-family: "Albertus Medium", Verdana, Arial;
position: relative;
left: 50px;
bottom: 85px;
color: #6C5F55;
overflow: auto;
height: 81px;
width: 85%;
}

HTH

Posted 9 years ago
VL Branko

offline
Member

I think it's best not to use top level triggers with sub menus as links to pages, leave the link path for those, the default # (dummy link).

If I don't put a link in the top level menu then when the page opens all the submenus of that menu are automatically displayed as in the image below. I don't want that to happen. If I put some dummy link then I get a 404 error if that link is pressed.

https://dl.dropboxusercontent.com/u/70260139/Screen%20shot%202013-05-07%20at%201.23.10%20PM.png

The same thing happens in smartphone view the sublinks are automatically opened as following link shows.

https://dl.dropboxusercontent.com/u/70260139/Screen%20shot%202013-05-07%20at%201.28.08%20PM.png

btw: to eliminate those scrollbars up in the mashead area when the browser is made smaller - you might try replacing.....
.masthead { 
padding: 10px; 
text-align: left; 
background-color: #252e49; 
position: relative; 
z-index: 10; 
box-shadow: 0px 0px 30px #000; 
height: 81px; 
}
With these.....
.masthead { 
padding: 10px 10px 20px 10px; 
text-align: left; 
background-color: #252e49; 
position: relative; 
z-index: 10; 
box-shadow: 0px 0px 30px #000; 
color: #6C5F55; 
font-family: "Albertus Medium", Verdana, Arial; 
} 
.masthead img {float:left; margin-right:10px}
....and remove....
.myname { 
font-family: "Albertus Medium", Verdana, Arial; 
position: relative; 
left: 50px; 
bottom: 85px; 
color: #6C5F55; 
overflow: auto; 
height: 81px; 
width: 85%; 
}
HTH

I don't mind the scroll bar but I will try your suggestion and see if I like the result.

Posted 9 years ago
Sinclair

offline
Member

It sounds like you may have 'Keep Current Marked Sub Menu Persistent Menu' selected in the UI, try turning it off, in smartphone view, the 'Current Marking' (not to be confused with 'Keep Current Marked Sub Menu Persistent Menu'), I believe will expand the menu so your visitors will have an indication as to where they are. With the dmm UI open, hit the help button for more info on the options available and perhaps that will help you choose which selections you should make.

A dummy link, such as # or javascript:; on top level 'triggers' should serve only to open the sub levels, regular top level links should take you direct to the url you browsed to in the 'Link Path' option, neither direct or dummy links (# or javascript:;), should result in a 404.

HTH

Posted 9 years ago
VL Branko

offline
Member

Ok will look into playing with that option and try your suggestions.

Posted 9 years ago
VL Branko

offline
Member

A dummy link, such as # or javascript:; on top level 'triggers' should serve only to open the sub levels, regular top level links should take you direct to the url you browsed to in the 'Link Path' option, neither direct or dummy links (# or javascript:;), should result in a 404.
HTH

Using the dummy link worked perfectly. Thank you.

Posted 9 years ago
VL Branko

offline
Member

Posted 9 years ago
VL Branko

offline
Member

btw: to eliminate those scrollbars up in the mashead area when the browser is made smaller - you might try replacing.....
.masthead { 
padding: 10px; 
text-align: left; 
background-color: #252e49; 
position: relative; 
z-index: 10; 
box-shadow: 0px 0px 30px #000; 
height: 81px; 
}
With these.....
.masthead { 
padding: 10px 10px 20px 10px; 
text-align: left; 
background-color: #252e49; 
position: relative; 
z-index: 10; 
box-shadow: 0px 0px 30px #000; 
color: #6C5F55; 
font-family: "Albertus Medium", Verdana, Arial; 
} 
.masthead img {float:left; margin-right:10px}
....and remove....
.myname { 
font-family: "Albertus Medium", Verdana, Arial; 
position: relative; 
left: 50px; 
bottom: 85px; 
color: #6C5F55; 
overflow: auto; 
height: 81px; 
width: 85%; 
}
HTH

That did remove the scroll bars, but now there is no padding between the image and the bottom of the masthead, it is right at the edge. I would like to keep the same padding as at the top. Is that possible? What would we have to do to accomplish that?

Posted 9 years ago
Sinclair

offline
Member

You could add a little extra transparent 'canvass' to the bottom of the image or add some extra bottom padding on the .masthead rule.

HTH

Posted 9 years ago
VL Branko

offline
Member

You could add a little extra transparent 'canvass' to the bottom of the image or add some extra bottom padding on the .masthead rule.
HTH

Extra padding did it.

Posted 9 years ago
Sinclair

offline
Member

Excellent!

Posted 9 years ago
VL Branko

offline
Member

If possible could you explain the logic behind your fix for removing the scroll bar, that way I can learn something (-:

Posted 9 years ago
Sinclair

offline
Member

It just seemed to me that the scrollbars were unnecessary and that floating the image did a better job and simplified your markup whilst giving the effect I guessed you were after, text wrapping around the image. Adding heights is usually not a good idea and can cause the kind of problems that required you to overflow:auto the myname div. I'm glad you posted again as I forgot a cardinal rule with floats, it needs containing or clearing.

Add overflow:hidden; to the .masthead rule to contain the float, now you can remove the extra bottom padding on the same rule, 10px should do now the float is contained!

Posted 9 years ago
VL Branko

offline
Member

Ok, that worked as well.

Posted 9 years ago
cdavis

offline
Member

I have implemented a PMM II (v 1.5.3) on an affinity page. (1) Smartphone view: looks ok on the PC (sizing and resizing), but when I call it up on my IPhone, it shrinks the page to a third of my IPhone screen. I noticed that there isn't a /*Smartphone Menu Presentation*/ section in my CSS - Could this be the problem? I did upgrade to the latest version of PMM II.

Also, how can I get the menu to be on top (like the DMM menus) when in smartphone view? - my middle column goes to the top and the left column next - putting the menu in the middle.

Here is the link: any help would be appreciated as I really like PMM menu -

http://www.fitmac.com/macpt/macpt_jbiehl.html

Posted 9 years ago
Sinclair

offline
Member

I have implemented a PMM II (v 1.5.3) on an affinity page. (1) Smartphone view: looks ok on the PC (sizing and resizing), but when I call it up on my IPhone, it shrinks the page to a third of my IPhone screen. I noticed that there isn't a /*Smartphone Menu Presentation*/ section in my CSS - Could this be the problem? I did upgrade to the latest version of PMM II.
Also, how can I get the menu to be on top (like the DMM menus) when in smartphone view? - my middle column goes to the top and the left column next - putting the menu in the middle.
Here is the link: any help would be appreciated as I really like PMM menu -
http://www.fitmac.com/macpt/macpt_jbiehl.html

You would have been better starting a new topic as folks who maybe have similar issues might not see any answers you receive :-)

This is my 2c worth, try and work with a dmm menu, as it only has one sub level, perhaps you won't need the 3rd subs you have in the pmm2, the trainers already have their own pages?

If it were me, I'd start with an 05 layout and in the p7affinity-1_05 stylesheet, replace this....

/*Columns Structure*/
.column-1, .column-2, .column-3 {
float: left;
width: 32.5%;
}
.column-2 {
margin-left: 1.25%;
margin-right: 1.25%;
}

With this.....

/*Columns Structure*/
.column-1, .column-2, .column-3 {
float: left;
}
.column-1 {width: 22%;}
.column-2 {width: 53.5%;}
.column-3 {width: 22%;}
.column-2 {
margin-left: 1.25%;
margin-right: 1.25%;
}

HTH some

Posted 9 years ago
VL Branko

offline
Member

I have implemented a PMM II (v 1.5.3) on an affinity page. (1) Smartphone view: looks ok on the PC (sizing and resizing), but when I call it up on my IPhone, it shrinks the page to a third of my IPhone screen. I noticed that there isn't a /*Smartphone Menu Presentation*/ section in my CSS - Could this be the problem? I did upgrade to the latest version of PMM II.
Also, how can I get the menu to be on top (like the DMM menus) when in smartphone view? - my middle column goes to the top and the left column next - putting the menu in the middle.
Here is the link: any help would be appreciated as I really like PMM menu -
http://www.fitmac.com/macpt/macpt_jbiehl.html

Aside from what Sinclaire said about starting a new thread PMM II is not designed to be a responsive menu system.

Posted 9 years ago
cdavis

offline
Member

Thanks for the feedback - that's what I thought going in, but figured the PMM menu was so popular that you would make it responsive...I do like the DMM...but kind of need the extra level...so, I will redesign that issue until may PMM is upgraded to response mode. ?:)

also...stupid stupid question, but I could not figure out how to start a new topic :(

Posted 9 years ago
cdavis

offline
Member

Thanks, Sinclair...where do I start a new topic? (I know, dumb question :()

BTW - the support I get from you guys rocks!

Posted 9 years ago

Problem with Affinity menu in smartphone view

Reply »