Kevin, I watched this video when you first posted but came back to watch a second time. Although my client's websites generally do not add/subtract pages, this approach is definitely a more streamlined approach. Keep up the SCSS videos, they are greatly valued!
Slowly starting to not feel like a chump anymore. Your videos introduce advanced concepts of CSS understandable for beginners, which is very valuable. None of the "you got to learn all the basics (basically chump-ways) first so then after that you can learn how to intelligently dump the basics" bs.
Thanks! YES, it did help. Yes, it made perfect sense. Yes, it's absolutely worth a bit of extra time to do it right. It can safe enormous amount of time troubleshooting/adjusting. Tutorials like this one are the top notch. More, please.
Many thanks for this Kevin. Slowly getting to grips with Bricks Builder and all your associated systems. I do have to play you at 0.75 speed as you are a quick talker. Maybe it;s me that is getting older😁!!! Keep up the good work!!!!!!!!!
This is a FANTASTIC tutorial and one I've just followed. Someone mentioned below about adding a new SCSS variable for the menu items instead of using data attributes and the mixin, so I did that and all is good. Someone else below also mentioned that the menu will always look off-centre because the number of characters in the menu options to the left and right of the logo are not equal so the trick here is to make each the same width as the longest menu option. Just have to work out how to do that now! But THANK YOU for this tutorial...!
ok figured it out, reasonably easy... replace the gap: 2em; in the UL with this... display: flex; justify-content: space-between; then add... ul li a { display: block; width: 150px; (or wider than your biggest menu option) padding: 5px 5px; text-align: center; } I've not checked to see how this degrades so I could be a right chump here, willing to take my chances...!
And you called me a chump! Guilty as charged! But seriously though, good lesson! learned alot! I have been using basic Sass for some time, never used a mixin until today. This will change the way I look at Sass and will certainly get more involved in it!
Great video Kevin! You definitely solved one of two challenges ( i.e. the dynamic logo width/margin values) present in one of my videos that addresses the same topic. The second challenge I've experienced in using absolute positioning is how to handle menu items on one side of the split having more characters, since the logo is taken out of the document flow, the text tends to overlap it. It appears there's no way to tackle this with (S)CSS. I'm looking into a solution with JS, it seems that may be a viable solution to that issue.
I got something close to this with CSS and posted it above however on reflection it's still not 100% correct because the logo is the reference point right? So the menu options to the immediate left and right of the logo need to have the same number of characters in them in order for it to "look" centered. It's not always possible and i'm not sure how to take this forward other than for sites that MUST have a centered logo, to stick the menu options in a hamburger menu. The logo is in the middle, it re-inforces the brand, all good!
Kevin, thanks so much for this tutorial! Was very interested in the a11y stuff you had. In addition to SCSS stuff, it would be badass if you could do some accessibility training as well. Lord knows many sites completely ignore that aspect.
I followed this tutorial and it worked perfectly. One strange thing, however. I have a menu with 6 links and with sub-menus and in the sub-menus, every fourth item is aligned right. What could be causing this?
Is it possible to create a variable to take the value in [data-menu-links="x"] by calculating the value of last child, and save repeating that segment of code?
Ok, I have a follow-up question I think has not been asked. I know this goes beyond sass but how would use the wp-menu itself to generate the data-attribute value instead of doing it manually?
Just followed along for the 2nd time to make my own. Pretty cool! Do you have any favorite resources to learn more SCSS? Something that I noticed on my end was that if there was a lot of variability in the character lengths of the links, it will not look centered due to the entire menu being centered with the center gap being off-center due to the sides having unequal characters. Does this happen for you too or did I make a mistake somewhere?
I watched this again today and I started wondering if it is possible to have the number of links be dynamically injected into the data attribute. Apologies if this had been asked and answered.
And with just one line of jQuery (or couple of lines more in vanilla JS) you could make it fully dynamic without having the need to change the data attribute by hand. Nice video
Great tut! You can also reduce the code by doing a SASS loop: @for $i from 1 through 5 { [data-menu-links="#{$i*2}"] { @include menu-gap($i*2); } } And if you want flexibility for the client so he can only update the menu items in the admin and the other works automatically, you could use php or javascript function to change data attribute. But of course it's out of the scope of this video…
In this case you can modify the calc count of the codes, but the issue is that the menu on the left and right side are not equal width and don't look good in terms of the design.
It won't look great. But if you really want to do it you just follow the same process and add the appropriate child targeting. if you don't want limitations on the number of links in your nav, don't use a centered logo menu. It's a drawback of the concept in general.
37:40 I do not know why but the link next to the logo on the right side there is more spacing than the link on the left side of the logo. Why is that? And maybe to make it easier is to make a ACF/Metabox field in a options page called "number of links" and than pull that data into the attribute value. You can make that field a dropdown even with: 2,4,6,8 etc to make it easier. Some people do not need builder access so a field is a good option.
@@Gearyco Is there a way within the native WordPress system and/or SCSS that it could automatically count the links within the menu, rather than needing to do it manually? If there there is and is has a name I'm happy to go and research it myself, I'd just need to have a rough idea of what I would be looking for :D Thanks!
I think if you don't change menu often. Center menus are often build once. Simple solution is to add left and right menus and mobile menu to wordpress and position them.
Since the logo is usually a link to the home page, why not just add it to the nav in the middle as an img tag, give it the alt text of 'Home' and a class, and then style it using that class?
Great video Kevin! Regarding Bricks, if we are talking facts here, are the code output resulting in a noticable faster site than Oxygen would deliver? Given that they have removal of id's and classes not in use along with overall clean html etc..
Hey Kevin :) A similar template doesn't exist in Frames - or have I been missing something? Right now there's 4 Header templates, but the one most similar has the Logo sitting on top of the menu bar. I'd be very happy to have exactly THAT template you explain here in the Frames templates :)
We removed it because it is quite technical and requires the user to understand a lot about how it works. Therefore, it is somewhat breakable. We are trying to come up with a more beginner friendly implementation.
@@mk-design because the basics cover 95% of needs when building sites. It’s your job to spice them up when you design them. And they’re not as basic as they seem when you look under the hood. But if you have any examples you want us to build we are more than happy to if they make sense. Just submit them to us in the group.
Really enjoyed the deeper dive with SCSS. I wonder if a php function could be written that would write a SCSS variable based on the number of menu items, and get triggered any time the save menu button is pressed?
@@Gearyco Not sure if the trade off would be worth it as it is more to maintain and their still is limitations like having an even number of menu items. Saying that... I wonder if a shortcode would work if you added it as the value for the data attribute in bricks... You can create a short code snippet in WPCodebox and add some code like: (which I assume works as I found it by Googling and have not tested it) // Get menu object $my_menu = wp_get_nav_menu_object( 'your-menu-name-or-slug' ); // Echo count of items in menu echo $my_menu->count;
This was awesome!! Thank you for walking us through it. With wp Codebox, do you save this as a cloud snippet so you can easily pull this in when building a site with centred logo.
@@Gearyco I guess Frames will need a description for some templates to explain the limitations (ie even # of menu items) and basics of what the data attribute is for
Thanks again for this amazing tutorials 🙏 I know this would be a silly question, but is there a way to dynamically count the number of the menu links somehow? Instead of manually writing the number in the attribute part?
Fantastic tutorial! I’m not good with math-based thinking (my brain started to heat up at the mixin part 🤣), but this was still relatively easy to follow even for me. One question I always had but never asked you thus far: I see you don’t shy away from using position: absolute whenever needed. Is that still considered a good practice? Is using position:absolute something to avoid whenever possible - in general terms? I was just working on a nested slider, and since I wanted to utilize srcset, instead of using background-image, I went with placing in an actual image, positioned aboslutely, and on top of that another div all over it (for overlay) z-indexed above, AND on top of that, the container with text. Is that a good way to do it? 😃 Thanks! 👊🏼
@@andrew.schaeffer4032 No SCSS like CSS doesn't have access to the html so the only way would be JS unless you inline the css or update the data attribute using php when the page is requested
Why not just add the logo as a menu item and add a class to it that way? Seems like it’d be a quicker method to center your logo in the menu items. No SCSS or other complexities needed?
There are many ways to accomplish the same thing. each with different pros and cons. technically, the logo is not part of the NAV. and when you put it in the wordpress menu, you are making it part of the navigation. So there is a potential argument about semantic accuracy and accessibility there.
@@Gearyco i mean, the amount of value here is damn high. and funny as hell. dunno how many people can find coding fun, i hated it for 20 years enjoying the only graphical aspect of my job, and now it’s funny. great teacher.
I think the mixin and data attribute were both an overkill, and, in the end, result in a lot of completely redundant CSS being generated. You already saved logo width as a SCSS variable (meaning you’d have to edit the SCSS to modify it), then why not also create a variable for menu items count, e.g “$links-count: 4;”? Then simply extrapolate the SCSS “:nth-child(#{$links-count / 2 + 1})” and “:nth-child(#{$links-count / 2})” and you are done. If you ever change the number of menu items, simply edit that SCSS variable and you are done. As a result - you have CSS that contains EXACTLY what you need. Nothing less, nothing more. Instead of what it is right now - bunch of unused, mostly duplicated CSS lines just to potentially cover other scenarios. AND you also have to deal with some additional data attribute in Bricks, which doesn’t pass the “3m rule” in my books.
There's an easier & simpler ways to have a centered logo. You just have to create 2 menus; one for left and one for right. Less headache. I mean, It works just perfectly. Amazing technique still.
Hard to maintain (moving a menu item from left to right). Hard to degrade to mobile (you need a third menu?). It’s definitely an option but has many downsides. These types of menus are a pain in the ass in general.
@@Gearyco yes, you need a third menu for mobile. Set the desktop Manu to hidden and BAM! I mean, it's not as dynamic as using the scss. It's just a cheap trick that works for "designers". however, a developer might lean more to the scss approach.
