Jump to content

Archived

This topic is now archived and is closed to further replies.

jeomiland

Navi bar resize issue as window made smaller

Recommended Posts

jeomiland

Kindly advise how to make the responsive aspect of this site: http://verdanthomeproducts.com/ work more smoothly. Client wants all that stuff in Fixed section, but as you can see when you resize your browser window, as soon as the line of navigation menu items breaks onto 2 lines, as window smaller, there is all this additional space above and below the navi. Is there a cleaner way to design this?  They also want that shopping cart bag up there, which also breaks onto a separate line when you resize.

Appreciate and tips to make this header area look better on resize, specifically it sucks on smart phone with practically the whole display area taken up by the navis stuff.

thanks

Share this post


Link to post
Share on other sites
Danny

Hi,

You will want to use media queries to style your menu on mobile devices or specific screen sizes.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jeomiland

thank you for the tip.

Can you please point me to a reference how to do in a Wordpress/DMS environment? I assume this is CSS? Have tried Firefox Inspector to tweak things, but am not finding the right place to adjust. Have looked at attributes for navi and surrounding section containers and tried to make margin: 0px; padding: 0px; even line-height: 0px; for several of these, yet still have way too much space above/below navi in green bar when it breaks on 2 lines when window is smaller. What are the best container/sections to tweak to control this phenomenon?

 

Share this post


Link to post
Share on other sites
Aires

Hi,

 

Some Creative input.

First off you are using 2 main navigation elements which will produce 2 mobile menus which could be quite confusing to users.

Recommendation: use a simple nav or secondary nav for the top navigation. Note that this nav will not go into mobile mode the link items will be visible on mobile in a kind of stack fashion.

And use a media box with html for your logo and link back to home.

Of course if this was how you intended it to be then carry on and ignore the above.

Next with the shipping info you should add some line height to the textbox by either adding a class to the (p tag) in the textbox or via the textbox id like so:

section#textboxum7kcw9 p { line-height: 22px!important; }

I applied this to your site and it look a lot better.

Now on to the woo search box that is hidden behind the slider…might be a good idea to display:none that on mobile or add it to the menu or footer.

Finally the cart is going to be a little tricky because you have it all alone in a textbox by it’s self and it is taking up an entire row.  But you might be able to try some absolute positioning to put it anywhere you want with css or add it to your simple nav if you decide to use it.

Media queries

 

/************************************/

 

/*for mobile 768 */

/***********************************/

@media (max-width: 768px) {

/*line height for shipping info*/

section#textboxum7kcw9 p {

    line-height: 22px!important;

}

}

 

 ~Aires

 

 

boom.png


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jeomiland

Hi Aires

Excellent suggestions and have implemented most. After some sleep and fresh coffee, will try the display:none and cart business.

Really appreciate you taking the time to check it out and comment!

Still see too much space below the now simple nav and in the green when menu line breaks on 2 lines. Any ideas about that? Using Chrome "Responsive Web Design tester" extention.

JE

Share this post


Link to post
Share on other sites
Aires

Morning,

The space below the simple nav is coming from the the textbox section below it with the cart in it. The reason is that DMS stacks section/elements for responsiveness. If you remove the textbox section you will notice that the space goes away and things look better. 

So you could  use a cart for mobile and a cart for desktop and use media queries to display them depending on the device.  The mobile cart could be done with a hook and css positioning and float it in a corner on mobile. 

Or you could try adding the cart image and link to simple nav. 

~Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jeomiland

 Or you could try adding the cart image and link to simple nav.

Hi again. I don't see an option to add an image to simple nav. Kindly explain how you would go about that? And can you point me to a good primer on hooks for this application?

Still puzzled about space above/below the Navi in green bar. If you grab lower corner of browser window and shrink width, the point at which the navi items break on 2 lines introduces a bunch of space above and below the menu items lines, thus that whole area gets way too tall...

thanks

Share this post


Link to post
Share on other sites
Aires

Can you screenshot and post it maybe we are looking at too different things

Sent from my iPhone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jeomiland

Ok

3 attached 3) nearly full screen, 2) line break (actually space happens just before actual line wrap occurs) 1) continue shrink, notice how top simple nav gets lost under the logo? Also the slider below has top chopped off, I suspect this has to to with that extra space.

Really appreciate your help.

Navi-break-hide.gif

Navi-linebreak-1.gif

Navi-nobreak.gif

Share this post


Link to post
Share on other sites
Andrew

I could help you a lot faster with a live link so i could inspect whats going on... 

All guesswork until then...

W #3 

My guess is it is absolutely positioned, if so you need to break it into the flow at small device widths.

Share this post


Link to post
Share on other sites
Aires

Just an observation but it seems that you are checking for mobile by bringing the browser window in ... That method doesn't really give you a accurate mobile view. Try using the chrome mobile view. Also you have a lot of menu items and it is natural for the menu to act this was until the mobile menu is activated. It seems you are trying to have your website responsive at all widths that will take more media queries to adjust the look. When I design I try to hit all of the popular devices that chrome has in its mobile inspector.

Sent from my iPhone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jeomiland

thanks

Ok with Chrome Mobli View I see these for ipad and iphone6

ipad.gif

iphone6.gif

Share this post


Link to post
Share on other sites
Aires

NP,

But I suspect you will have some issues on the ipad landscape 1024 because of all the menu items in which case you may need to trigger the mobile menu early to avoid the stacking of the items.

Sent from my iPhone using Tapatalk


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jeomiland

Hey guys

one more question - different site but simmilar issue. DO I need to start a new thread for this one?

at http://199.119.180.102/~harmhill/newsite/  I have a side nav that repeats the navi at top.  On smaller devices I'd like to drop the side nav and just have the mobile menu at top.  Have inserted this in CSS:

@media (max-width: 640px) {

section#widgetizeru30wm84 {
    visibility: hidden!important;
}

}

but how do ya get rid of all the space that is taken up by the invisible section?

Also, how to get the upper Nav bar background (using Whitehouse child theme) to get taller to cover menu items that wrap on smaller devices?

And finally, what happened to the background image when viewed on small device? (again looking via Chrome Mobile viewer)?

Thanks

Share this post


Link to post
Share on other sites
Aires

Try display:none; Instead of visibility

Sent from my iPhone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jeomiland

cool  --  you Rock!

oh, and I checked the "Fit image to page? " box and BG remains in other devices now, although I liked the look of the BG better without "Fit image to page?" checked... we must compromize!

Share this post


Link to post
Share on other sites

  • Similar Content

    • decmech
      By decmech+
      Hey Guys,
      Having some issues with the dropdowns for the Navi in DMS. For some reason I can't have any more than 2 levels in the dropdown. The cursor is hovering over RPAS Training (and the arrow to indicate more is visible) but no matter what browsers, it never shows up. Also inspecting the HTML shows that the additional fields are not there.
      I have inspected the PHP and cannot see anything that is limiting the number of levels. Any assistance to get the additional levels showing would be great.

    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • Kedark
      By Kedark+
      Hi,
      how to set the menu navi:
      - The background color when you expand a submenu,
      - Background color on mouseover,
      - The color of the text,
      - Width of submenu
      Please help, nowhere in the forum I have not found the answers to these questions ..
      Regards
      RKA
       
    • triggerfish
      By triggerfish+
       I have setup the Navi (content width) to show the burger icon for my menu system (desk and mobile).
      It works great..displays only the Burger..BUT ONLY when on the Default Menu (which is not a real menu, but some random selection of pages).
      As soon as I select the MAIN Menu in the Navi settings it suddenly displays all of the menu items...which I don't want.
      The domain is not pointed yet..it is at 162.219.161.131
      If you know how to trick your computer the website is here... http://phw-homes.com/home-dms-2


    • balfred1345
      By balfred1345
      null When I tested Search using the search field in Navi, it throws the error as shown in pastebin: http://pastebin.com/DJ079bmy
      Is there a fix for this? If there is no fix, can you please tell me how to disable search in Navi?
      Thanks,
      Bruce
×