Customizing the on collapse nav menu

@ben @Apple

General question about CSS styling of the mobile collapse nav menu. I am having difficulty placing the custom CSS style to the Nav menu that appears on mobile. I have an @ media CSS

@media (max-width 600px) {
.navCMin1 {
    width: 100vw;
    height: 100vh;
    background-color: #83a958c9;
    padding: 2rem 1.5rem
}

}

This is to be applied to the container so that when the buger is touched on mobile the menu appears with the settings. I have tried a few things and it is just not being applied correctly. below is the HTML.

     <header id="navbar" class="fixed-top navbarBg pt-lg-2 pb-lg-2">
    <div class="row align-items-start align-items-lg-center justify-content-xl-center align-items-xl-center">
      <div class="d-flex navContWidth justify-content-lg-center align-items-lg-center">
        <div class="col-auto align-self-center navbarImage d-none d-lg-block">
          <img width="80" height="80" src="/assets/svgLogoFiles/logoFullColorFinalWT.svg">
        </div>
        <div class="col">
          <div class="d-flex justify-content-lg-center align-items-lg-center">
            <nav class="navbar navbar-expand-lg navbar-light bg-transparent style5">
              <div id="collapse1" class="collapse navbar-collapse">
                <div class="navbar-nav w-100 justify-content-start align-items-start align-items-lg-center navCMin1">
                  <div class="d-flex flex-row">
                    <div class="d-flex flex-column flex-lg-row justify-content-lg-center align-items-lg-center">
                      <a class="nav-item nav-link navbar-light navebarElements navHover" href="/pages/about">about us</a>
                      <a class="nav-item text-white navVLH lh-1 d-lg-none">______</a>
                      <a class="nav-item nav-link text-white d-none d-lg-block" href="#">|</a>
                      <a class="nav-item nav-link navebarElements" href="/pages/carbonCredits">carbon credit</a>
                      <a class="nav-item nav-link navbar-light" href="/"><i class="fas fa-thin fa-earth-africa fa-3x"></i></a>
                      <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">the GEC mission</a>
                        <div class="dropdown-menu navbarBg" aria-labelledby="dropdown1">
                          <a class="dropdown-item text-white" href="/pages/socialBenefits">social benefits</a>
                          <a class="dropdown-item text-white" href="/pages/climateChange">climate change</a>
                          <a class="dropdown-item text-white" href="#">frequently asked questions</a>
                        </div>
                      </div>
                      <a class="nav-item nav-link text-white d-none d-lg-block" href="#">|</a>

                      <a class="nav-item text-white navVLH lh-1 d-lg-none">______</a>
                      <a class="nav-item nav-link navebarElements" href="#" dmx-on:click="browser1.goto('/pages/contactUs')">contact us</a>
                    </div>
                    <div class="d-lg-none">
                      <p style="font-size: 24px" class="text-white" dmx-on:click="">X</p>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </div>
        </div>
        <div class="d-flex col-auto justify-content-center col-lg-auto align-self-lg-center align-items-lg-center justify-content-lg-center align-items-start">
          <button id="btn1" class="btn d-lg-none" data-bs-toggle="collapse" data-bs-target="#collapse1"><i class="fas fa-bars fa-lg style1"></i></button>
          <button id="btn2" class="btn btn-primary accountLogin btnPM d-none d-lg-inline-block btn-sm" data-bs-toggle="button" dmx-on:click="modalLogin.show()" dmx-hide="session1.data.token">Login</button>
          <button id="btn3" class="btn btn-primary accountLogin btnPM btn-sm d-none d-lg-inline-block" data-bs-toggle="button" dmx-on:click="endsession.load({})" dmx-show="session1.data.token">Logout</button>
        </div>
      </div>
    </div>
  </header>

Also ***** seeing as when the menu appears it will cover the screen I have an X icon button that will close the menu. I am having trouble finding the route to hide.

Thanks for any help!

Hey bro,

I’m a back-end person :sweat_smile:

Yah I know… Sorry. No one responds anymore. Hey good news I figured out the SSL on both the back end and frontend . Our Backend API is now HTTPS

1 Like

Could you maybe try posting some screenshots along with the code there is more custom styles in that code than listed above without those we have no idea how they edit the appearance of the nav?

Sure Ill upload 2 videos. You will see the issue is that when the CSS is applied it works for mobile but does change back on desktop. This should be an easy thing.

Thanks for your help.

@Sorry_Duh

This is what I want it to look like on mobile when the burger is clicked

dont focus on the lines that separate the links. I have fixed that.

This is what it will look like on desktop and laptop or larger…

The X close icon will close the menu

A little updated information, so I have applied the @media and this is what it does now. Very frustrating.

Screen Shot 2023-01-26 at 8.12.04 PM

I don’t understand the problem, please explain.

As far as the close button is concerned, this will close the menu

<p style="font-size: 24px" class="text-white" data-bs-toggle="collapse" data-bs-target="#collapse1" role="button">X</p>

@ben

Let me try to explain this. I need to apply the style class to one of the divs. however when I apply the class to a div, the change is not made. In this case, I have applied the following css style;

@media (max-width 600px) {
.navCMin1 {
    width: 100vw;
    height: 100vh;
    background-color: #83a958c9;
    padding: 2rem 1.5rem
}

}

to the div class=“d-flex” as shown in the below image.

as you can see no change to the menu when the burger has been pressed.

Screen Shot 2023-01-26 at 8.52.11 PM

My problem with this is I am not understanding where to apply the css to allow for the change of the style of the menu.

Change
@media (max-width 600px) {
to
@media (max-width: 600px) {

Man I new it was something small. Have I placed it in the right place?

Yes

One last question. Is there a reason why I am not able to (and I find that I have this issue alot) being able to specify distance between elements within a div? Meaning, the X (close button) will not move to end and the nav elements will not stay to start. I have placed them in separate flex containers wrapped in a flex container, and specified space between.

you know why I never caught that, because some of my @media’s work and others do not. Not one has the :

lol

As always… Thank you ben!

1 Like

Add a few flexbox properties

I think adding that : fixed all issues. I really feel dumb. But making progress.

Thanks again!

Don’t we all :joy:

1 Like

:joy: I am working through cleaning up my CSS and simplifying everything. Planning is everything for an efficient design!

Does the X (close button) need to be a btn or can it be an on click event? To close?

1 Like