tip - responsive menu center on wrap - tip

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
Phidippus
 
 
Posts: 55
Joined: Thu Mar 12, 2015 5:16 am
Contact:

tip - responsive menu center on wrap - tip

Post by Phidippus » Fri Jun 16, 2017 9:59 am

Here's a TIP I hope somebody - besides me - finds useful. The property id of my responsive menu is "responsive_menu".
My TIP is, if you put the code below into the heads section of the page HTML, it will force the menu to be centered when it wraps to a second line such as in narrower breakpoints and before it reverts to the drop down (hamburger) at 480 pixel width.
(Note the media query - without this, the drop down stays down).

<style type="text/css">
@media only screen and (min-width: 481px)
{
#wb_responsive_menu ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
</style>

This TIP is working fine for me right now... but let me know if there is a bug or even easier workaround... I'll correct this TIP myself if I find an error.
Last edited by Phidippus on Fri Jun 16, 2017 10:52 am, edited 1 time in total.

User avatar
BaconFries
 
 
Posts: 4354
Joined: Thu Aug 16, 2007 7:32 pm

Re: responsive menu center on wrap

Post by BaconFries » Fri Jun 16, 2017 10:10 am

Are you sharing this as a "Tip" ? or asking for a "Tip"? if it is the latter then please see the forum rules of this section before posting thanks.

Phidippus
 
 
Posts: 55
Joined: Thu Mar 12, 2015 5:16 am
Contact:

Re: tip - responsive menu center on wrap - tip

Post by Phidippus » Fri Jun 16, 2017 9:11 pm

Just for clarity - I love excessive clarity myself...
I'm using the standard Responsive Menu under Navigation in the Toolbox.
I cleared out all the icons.
Checked: use hover style, close menu on link, alignment: center, full width: true, breakpoint: 480.
I changed the Property ID name in the Properties Inspector for the menu to be: "responsive_menu" (do not include quotes).
in the css code, make sure to add "wb_" in front of your menu property id name as shown in my code.
If you copy and paste the menu into other pages, double check to see if the ID name of the menu changes and correct if necessary.
Whatever you set the breakpoint for the menu at within it's settings, add "1" to that in the media query in my code.
With the above code placed within the HEADS on every page HTML, this will work poifectly !
I'll add a link to the website later this evening when it is in the can so you can see this in action.

Phidippus
 
 
Posts: 55
Joined: Thu Mar 12, 2015 5:16 am
Contact:

Re: tip - responsive menu center on wrap - tip

Post by Phidippus » Sun Jun 18, 2017 6:24 am

Here's a website I'm currently working on that is using this code mentioned above:
http://propstraightener.com
Resize your browser or use Firefox ctrl+m to see how the menu wraps.
The wrapped menu will drop down over elements below it - it won't force the layout grid to expand - so you must take this into consideration when creating your padding and other space. An easy tweak is to add a layout grid as a spacer, or put a spacer where ever it is needed, and use breakpoints to only have it appear when necessary to push elements down to make room for the menu wrap.
I'm also using custom code for the background image which I'd better mention in another thread. (i was having problems with Android devices displaying full backgrounds when using fluid responsive)

petertj
 
 
Posts: 28
Joined: Thu Apr 12, 2012 11:18 am

Re: tip - responsive menu center on wrap - tip

Post by petertj » Thu Jun 22, 2017 10:33 am

The original post was clear - Phidippus was offering a tip (he said "Here's a tip..."!) - so any question(s) about it being posted in the right forum area was irrelevant, officious and unhelpful. Anyone with any experience in the IT business knows that an idea may well be improved upon. I have found this tip to be very useful.

As a user of shallow WWB knowledge I find any 'tips' that provide examples extremely helpful and a real boon when compared to the oft employed list of instructions.

A demonstrably working example illustrates success and encourages.

User avatar
BaconFries
 
 
Posts: 4354
Joined: Thu Aug 16, 2007 7:32 pm

Re: tip - responsive menu center on wrap - tip

Post by BaconFries » Thu Jun 22, 2017 10:42 am

Once again petertj you have made my morning more enjoyable. Please feel free to carry on pointing out things to me ( although not directly ) that you do in the manner you do so and I will enjoy them more each time you do so.

And just to inform you "all knowledgeable" petertj the OP has modified his post. In the original post there was no mention of Here's a TIP so before you try to criticize me ( without actually mentioning me personally ) in your own fashionable way as you do get it right please.
Original time of post
Post Fri Jun 16, 2017 10:59 am
Modified updated
Last edited by Phidippus on Fri Jun 16, 2017 11:52 am, edited 1 time in total.

Phidippus
 
 
Posts: 55
Joined: Thu Mar 12, 2015 5:16 am
Contact:

Re: tip - responsive menu center on wrap - tip

Post by Phidippus » Thu Jun 22, 2017 8:19 pm

petertj wrote:
Thu Jun 22, 2017 10:33 am
As a user of shallow WWB knowledge I find any 'tips' that provide examples extremely helpful and a real boon when compared to the oft employed list of instructions.... A demonstrably working example illustrates success and encourages.
Thanks for the positive feedback. Yup.. I did edit the original post... but did so facetiously, because it was already positively obvious it was a tip from the get go. Apparently we must endure some sand kicked in our face to contribute useful information to the community.
Last edited by BaconFries on Thu Jun 22, 2017 8:47 pm, edited 1 time in total.
Reason: Removed your comments once more.

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests