[Support request] Block element inherits navigation typography

Home Forums Support [Support request] Block element inherits navigation typography

Home Forums Support Block element inherits navigation typography

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1634947
    George

    I have a block element that is comprised of three headline elements. This block element is placed inside the generate_inside_navigation hook. The block’s typography seems to inherit the navigation typography even though I have set different typography inside the headline elements. In the screenshot provided, the info above the navigation bar is supposed to be in capitalize style, eg Email Us.

    #1635092
    Elvin
    Staff
    Customer Support

    Hi,

    Can you link us to the site in question to check?

    Also, can you temporarily disable any caching plugins so we could see the original sources of the styling? This is so we could fully check how and why it’s behaving that way.

    You can provide the site details on the private information text field. Thank you. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1635474
    George

    Hi, I found out why it is happening. As I have set links inside the headline elements and placed them inside the generate_inside_navigation, the styling is inherited from the nav .main-navigation a class, in which case it will style links accordingly to the settings in the Customizer.

    Maybe something to make Tom aware of.

    #1636220
    Elvin
    Staff
    Customer Support

    If I may suggest:

    In case you haven’t tried it, GenerateBlock’s Headline block allows users to set specific typography to a specific text. I believe you can use this to prevent this issue.

    It’s also a good idea to add classes to things added within the Block Element so it could be custom styled w/ CSS.

    Thank you for sharing it with us.

    A wise man once said:
    "Have you cleared your cache?"

    #1636224
    George

    Hi Elvin, if you read my first post, I state that I have already used the headline typography options for the block but it didn’t work. What I did is style the element separately but obviously the issue needs to be resolved so that the nav class can be bypassed.

    #1636416
    Elvin
    Staff
    Customer Support

    Oh that’s right, I had the default Heading Block in mind. My bad.

    I’ve actually tried replicating the issue you’ve mentioned on a fresh sandbox site but wasn’t able to.
    Here’s the demo site: http://elvin.wppluginsupport.net/

    You can see on the demo that the “Email Us” text is using its own Roboto font while the navigation uses system stack. text transform is also being applied properly

    That said, it’s an isolated case and not a bug.

    The reason why this happens could be due to GB’s styling not being loaded. It could also be from the use of a custom CSS. Perhaps a plugin is conflicting with it or GB’s styles and scripts were dequeued on purpose.

    Hence, we ask if you could temporarily disable plugins(to make sure its not a plugin conflict) and let us have a look on the page in question so we could get clues on why it occurs on your site.

    A wise man once said:
    "Have you cleared your cache?"

    #1639729
    George

    In the site, I am attaching, the top bar has headline elements for the phone, fax and email. The headline typography is set as follows:

    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.04em;

    Instead, the typography shown in the front-end is inherited by the menu nav typography.

    #1639834
    Ying
    Staff
    Customer Support

    Hi George,

    We could try to add CSS to change its typography, but for better result I would recommend to use Buttons block instead of Headline block in this case.

    There’re less chances that the typography settings of Buttons block get overridden.

    Let me know πŸ™‚

    #1639893
    George

    I have already fixed it with CSS, no problem. I just posted the link to showcase an issue so Tom could possibly fix it in the next version.

    #1639938
    Leo
    Staff
    Customer Support

    The best solution is actually to use the buttons block as Ying suggested.

    Generally, if the entire element is a link, then buttons block should be used instead of a headline block πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.