Customize navbar menu in Grayscale template

I am always grateful for your help. It’s been a month since I started Bootstrap. :sweat_smile:

I have some questions about the menu in the Grayscale template. I’m studying, but I didn’t understand.

  1. When the number of menu items is few, the logo and menu will spread horizontally. Do I just adjust only the margins of each part to solve it? But I need to adjust all the responsive. Is there any other method?

  1. Grayscale templates shrink when scrolling by JS. After navbar-shrink works, I don’t know where to adjust the mainNav height, logo size, etc.

Logo resize e.g. : https://tan-taka.com/diver/

  1. When changing to a toggle menu, the menu will appear with the width and color of mainNav. Is it possible to expand only Navbar Collapse while keeping the color of mainNav as it is? Is it impossible without making all the toggle menus in JS?

.
My head explodes because I have to study a lot. :cold_face:
I beg your kindness. YOROSHIKU ONEGAISHIMASU.

In the Navbar Collapse you have the Nav component. You can adjust the alignment to Start,Center and End in the Options panel

You can try this css and change padding,height and transition after taste

CSS

#mainNav {
  background: #000;
  transition: all 420ms ease-in-out;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 20px;
    padding-bottom: 20px;
    letter-spacing: 1px;
    border: none;
    background: transparent;
  }
}

@media (min-width: 992px) {
  #mainNav.navbar-shrink {
    padding-top: 5px;
    padding-bottom: 1px;
    border: none;
    background: #000;
  }
}

@media (min-width: 992px) {
  #mainNav .nav-link.active {
    outline: none;
    background-color: rgba(255,255,255,.3);
  }
}

@media (min-width: 992px) {
  #mainNav .nav-link.active:hover {
    color: #fff;
  }
}

Thank you very much! Arigato-gozaimasu! :smiley:

I was able to scroll to make the logo smaller with the script below. Please let me know if there is a better way.

I use the same basic script on one of my websites.

1 Like

@yuki

In the grayscale template you don’t need to add any script to make the logo smaller when scroll. It’s comes with that template
Here is an example

if you like it you can download the bsdesign on the page

1 Like

@printninja san

I searched a lot of internet and arrived at it. :v: :v:

@kuligaposten san

Great! :star_struck: I downloaded it immediately. This time, I was able to learn two ways: using JS, CSS only. Thank you very much!

If I click the toggle button when there are many menus, the page will be almost hidden when I view it on my iPhone. If I want to display a menu with a short name only on the right side, is there no choice but to use JS?

Is it possible to create a menu like the one below with CSS while using Navbar? :thinking:

e.g. How To Create an Off-Canvas Menu

@yuki

Yes here is an exemple

@kuligaposten san

That was exactly what I wanted to do! :heart_eyes: It’s perfect when the menu appears from the right side. I’m parsing your sample but it’s a lot of code and I still don’t understand. If I change it to a toggle button at the size of a smartphone, I can do what I want!!

I still have a question about Grayscale template.

The first tag of Nav Item (Link) hover white. The hover color I specified from the second menu.

If I scroll once and return to the top, all will be the specified hover color.

In the beginning, the first Nav Item > Link had an active class. So I duplicated the second link menu and put it in the first Nav Item (Link). But no matter where I look in the CSS, I can’t find a whitening designation.

Am I overlooking something?