Bootstrap 4: Use block level buttons on navbar menu on small screen but keep normal sized button when expanded

Question

I am using bootstrap 4 beta.

I have a navbar that uses standard sized buttons as nav-items when the screen is full sized, and these are displayed to the right of the navbar inline with the site logo, which is positioned to the left of the navbar.

I would like these buttons to span the width of the navbars drop down menu when the screen is small and the hamburger menu is toggled.

At the moment these are aligned left as per the image below.

I think that using block level buttons would give me the desired result on the dropped down menu but they would not work on the full sized navbar...

My question is how can I make the buttons in the second image span the width of the dropped down menu when the hamburger menu is toggled but also shown as normal sized when the screen is large and the collapse to the hamburger menu hasn't taken place as in the first image?

i thing you have to check the class with his media query config to custom — Enrique YC, Oct 10 '17 at 17:24
thanks @Henrique YC - do you mean I should use a css media query to apply a different button class depending on screen size? I have not done this before but will check this out — , Oct 10 '17 at 17:27
i sometime we have custom something class or aply one style to specify side — Enrique YC, Oct 10 '17 at 17:29
it seems using 'width: 80vw;' in a css media query allowed me to do what i needed! — , Oct 10 '17 at 17:47

score 0 · Answer 1 · answered Oct 10 '17 at 18:13

It seems that using width: 90vw; in a css media query resolved the issue:

#header-button {
    margin-top: 0.5;
    margin-bottom: 0.5;    
    margin-left: 0rem;
    margin-right: 0.5rem;

}

@media (max-width: 987px) {  
#header-button {
    width: 90vw;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    padding-bottom: 0.8rem;
    margin-left: 0.2rem;
}

}

which now looks like:

With the black blob obscuring my logo...

This means I did not need to alter the button class and I found this from a stackoverflow question linked below (last answer):

Set CSS class equal BootStrap class with media query

Bootstrap 4: Use block level buttons on navbar menu on small screen but keep normal sized button when expanded

1 Answers1