Contrib.social

Mobile nav button theming messed up. Help, likely not a bug.

Open on Drupal.org →
Created on 23 March 2024, 9 months ago
Updated 16 April 2024, 8 months ago

Problem/Motivation

I just created my first multi-level TB MM on a project and it looks great on the desktop browser.

I put some nav classes on the container for dark theme and primary color and it looks nice.
navbar navbar-dark bg-primary bg-edge2edge justify-content-center

I did some scss theming in my theme to do some hover reverse color highlighting and making my secondary menu have a different color theme.

/var/www/varbase/docroot/themes/custom/lab_theme/components/organisms/navbar$ cat navbar.scss
$sj_maroon: #ad3d3d;
$sj_gold: #CCA966;
$primary:       $sj_maroon;

$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';

#block-lab-theme-secondarymenu-2 {
--bs-navbar-padding-y: 0;
}

#block-lab-theme-secondarymenu-2 {
//#block-st-jude-theme-secondarymenu {
  #{$a-tags} {
    color: $sj_gold;
    text-decoration: none;
  }
  #{$a-tags-hover} {
    background-color: $sj_gold;
    color: $sj_maroon;
  }
}

//.tbm-link .level-2 .no-link .tbm-group-title {
.tbm-subnav>.tbm-item>.tbm-link-container>.tbm-link {
        color: $sj_maroon !important;
}

.tbm-submenu {
  background-color: $sj_gold !important;

  #{$a-tags} {
    color: $sj_maroon !important;
    text-decoration: none;
  }
  #{$a-tags-hover} {
    background-color: #c39e57 !important;
//    color: $sj_gold;
  }
}

But on mobile, I am getting the link buttons with only a very narrow portion colored.

Has anyone ever run in to this and can help me figure out my mistake?

Thanks

💬 Support request
Status

Active

Version

3.0

Component

Documentation

Created by

🇺🇸United States HeneryH

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @HeneryH
  • Comment 9 months ago →
    🇺🇸United States HeneryH

    It is the "justify-content-center" class on the menu block on the block layout page that is messing things up.

    But if I don't have that, then the fact that I put the edge-to-edge screws up my alignment.

    The goal of having edge-to-edge AND centered is proving a challenge.

  • Comment 9 months ago →
    🇮🇳India ravi kant Jaipur

    ravi kant → made their first commit to this issue’s fork.

  • Comment 9 months ago →
    🇮🇳India ravi kant Jaipur

    The issue is due to custom theme.
    I did not find issue in default styles.
    So the issue will be fix according custom work of custom theme.

  • Comment 9 months ago →
    🇺🇸United States HeneryH

    In your example, the menu is left justified. I noted in my OP that the issue happens when the menu is centered.

    If you have testing ability on your site, can you apply the 

    justify-content-center

    class to the menu block in the block layout configuration page?

  • Comment 9 months ago →
    🇮🇳India ravi kant Jaipur

    TB Mega menu also have option to add classes on parent and child item's wrapper.


  • Comment 9 months ago →
    🇺🇸United States HeneryH

    So does it look ok on mobile when you do that or not?

  • Comment 9 months ago →
    🇮🇳India ravi kant Jaipur

    @HeneryH
    I just review again your comments.
    I think something is broking due to your custom styles work.

  • Comment 9 months ago →
    🇺🇸United States HeneryH

    Can you just confirm that your test shown above results in the proper behavior? You showed centering the menu with a class but you won't confirm that it looks proper on mobile.

  • Comment 9 months ago →
    🇮🇳India ravi kant Jaipur

    @HeneryH
    I have added a mobile view screenshot in #5
    So i can say that it working as designed in mobile devices.

  • Comment 8 months ago →
    🇺🇸United States HeneryH

    Ravi, that screen shot is left justified. This post is about center justified.

  • Comment 8 months ago →
    🇮🇳India ravi kant Jaipur

    @HeneryH
    I have just confirmed with justifying option. I am not getting any issues.
    So I am sure that you are getting the issue due to other styles.

  • Comment 8 months ago →
    🇺🇸United States HeneryH

    I don't understand the misunderstanding here. The image that you are providing for evidence is NOT center justified.
    It is clearly left justified.

    Am I mistaken? Comparing my image above that is center justified to your image that is left justified.

    You are showing a left-justified image to say that my scenario of center justified usage is a flawed issue.

  • Comment 8 months ago →
    🇮🇳India ravi kant Jaipur

    I am checking in olivero theme.

  • Comment 8 months ago →
    🇮🇳India ravi kant Jaipur

    @HeneryH
    Is possible to share your website URL? so i can check actual possible issue.

  • Comment 8 months ago →
    🇺🇸United States HeneryH

    Sure, here it is. Looks fine on desktop, Mobile is messed up.

    https://www.flynnconsultingllc.com/

  • Comment 8 months ago →
    🇮🇳India ravi kant Jaipur

    @HeneryH
    The issue is due to display flex properly on block-content dev.
    This can fix by overwriting styles.
    Please see the attached video "issue-is-due-to-default-style.mov"

  • Comment 8 months ago →
    🇺🇸United States HeneryH

    Thank you for your time helping me debug this. I knew it was unlikely a bug and appreciate your help. I will investigate with your suggestion.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024