Streaming live at 10am (PST)

Flexbox and Font-Size Issues in Navbar "Menu Button" Element


#1

I am having some weird issues with the Menu Button Navbar element on tablet and below. First of all, flexbox is having zero effect on it. It matters not whether I have display set to block or any of the many flex options, nothing changes. I was hoping to use Flexbox to properly center the children elements.

Also, I have been using EMs for font-sizing with the entire site. I’m familiar with how they work, and have had no issues until now. For some reason, within the Menu Button element, the children text elements are significantly larger. For example, 1.25em is the standard body copy size throughout the site, however in this element it’s huge—nothing is different on the parent element font-size.

38
42

Read-Only: LINK
Published: LINK


#2

​Thank you so much for posting excellent questions!

There are definitely some pre-existing styles associated with Components in Webflow. These styles exist so the component will function out of the box.

​In this case, though, you can use this workaround:

​1. Select menu button
​2. Add a div block
​3. Nest icon and text into div
​4. Set div to flex

Hope this helps! :slight_smile: