Nowrap and Vertical Top of whole menu bar

Shapely
1

I am tinkering about this problem for quite a while. I want to have the whole menu bar nowrap when you resize the browser width as well as have the menu toggle (icon) always on vertical top of the menu. For that I used centered and vertical top flexbox alignment with justify-content: center; align-items: flex-start;

I also tried to make surround it with a

.text-nowrap {
    white-space: nowrap;
}

container with no effect.
When the browser width is too small the logo and the menu toggle (icon) always wrap and if I collapse/open the menu the icon is at the bottom (and not on top!). I hope you can help me with these two requirements.

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to help you by going to Appearance > Customize > Additional CSS and pasting it there.


/*Menu icon always on bar*/
.module.widget-handle.mobile-toggle.right.visible-sm.visible-xs {
    display: block !important;
}

/*Hide worded menu*/
.module-group.right {
    display: none;
}

/*Menu nowrap*/
nav#site-navigation {
    white-space: nowrap;
}

Best Regards,
Support

3

Hey. thanks a lot for the quick response. your custom css code helped me to fulfil one wish which is that it now always stays on top. Thanks a lot!

However the top bar still breaks/wraps to a second line. The logo and the menu toggle are in different lines when the browser is small. They should always stay at the same row. Do you know why it breaks or which custom css code to apply?

4

Hello there,

Could you please provide a link to your website so that I can inspect the menu?
We can try to adjust the menu font size so that it does not go into a second line.

Best Regards,
Support

5

thanks again for your offer to help. can I send you a private message somehow providing the link?

6

Hello there,

Yes, you can make the message private by using the “Set as private reply” checkbox at the bottom of the form, just above the file upload button.

Best Regards,
Support

7

thank you. I didnt see that.

here is the link: ZAeB - Zeitschrift für Aesthetische Bildung
hope you find the part which let it wrap

8

HI

“The logo and the menu toggle are in different lines when the browser is small. They should always stay in the same row.” - Because there is no physical space to hold this long tagline text and menu with big font size, you have to lover font size of the menu, i see you changed it to 25px plus you increased letter spacing, simple there is no space

9

Hi Noda. thanks for your reply
however I thought they are all not visible at a specific width (tagline, menu is all invisible) such there would be enough space. I always thought that would be the case

apart from that I now tried to change the font size to lower than 6 and completely removed the tagline and changed the title to one letter such there is almost no space needed anymore. still the breakpoint is at the same width/point of the browser and it breaks

10

Hello there,

You can use the following CSS code to change the menu position on mobile by going to Appearance > Customize > Additional CSS and pasting it there.


@media only screen and (max-width: 900px) {
#site-navigation .container > .flex-row {
    display: inline-block;
    width: 100%;
}

#site-navigation .module.left {
    width: 50% !important;
}

#site-navigation .module.widget-handle.mobile-toggle.right {
    display: inline-block;
    float: right;
    width: 50% !important;
}
}

Best Regards,
Support

11

Thanks a lot.
I don’t know at the moment. It kinda works for some widths now. However if the width is small (below about 700) the menu item is just a little bit under the menu icon. it doesnt look like a full break/wrap but it is underneath it.
see http://www.zaeb.net/wordpress/2018/03/02/impressum/ (test different width and to unfold/collapse the menu)

Another problem is there is still a wrap between the logo title and the menu icon if the browser is small.
see ZAeB - Zeitschrift für Aesthetische Bildung

I might have inconsistencies between the “display: inline-block” and “inline-flex” etc. can you have a look and let me know and unscramble my custom css code:

@media (min-width: 125px){
	.main-navigation .menu  {
    display: inline-flex;
}
	  ul.dropdown-menu.active {
        display: inline-flex !important;
    }
}

@media only screen and (min-width: 125px) {
    .collapse {
			display: inline-flex;
			justify-content: center; 
			align-items: flex-start;
			flex-wrap: nowrap;
    }

    .navbar-header {
        /*float: left;*/
			justify-content: center; 
			align-items: flex-start;
			flex-wrap: nowrap;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav.navbar-left {
       /*float: left;*/
       margin: 0;
    }

    .navbar-nav.navbar-right {
      /* float: right;*/
       margin: 0;
    }
    .navbar-nav>li {
        /*float: left;*/
    }
    .navbar-nav>li>a {
        /*padding-top: 15px;
        padding-bottom: 15px;*/
    }
}

@media only screen and (max-width: 125px) {
     .collapse {
        display: none;
     }

     .navbar-header {
        display: block;
     }
}

/*Menu icon always on bar*/
.module.widget-handle.mobile-toggle.right.visible-sm.visible-xs {
    display: inline-flex !important;
}

/*Hide worded menu*/
.module-group.right {
    display: inline-flex;
}

/*Menu nowrap*/
nav#site-navigation {
    white-space: nowrap;
}

@media only screen and (max-width: 1200px) {
#site-navigation .container > .flex-row {
    display: inline-flex;
    width: 100%;
}

#site-navigation .module.left {
    width: 50% !important;
}

#site-navigation .module.widget-handle.mobile-toggle.right {
    display: inline-flex;
    width: 50% !important;
}
}
12

Hi,

What exactly you’re tying to achieve? Can you give us a illustration in a screenshot? So that we can help you with it.

Let us know,

Thanks,
laranz.

13

Thanks for your offer. I want to achieve the following.
The menu bar should always be in the Center and top. Everything should always be at the same row except the menu is collapsed/unfolded when the width of the browser is too small. Then all the menu items should be underneath.
I coded the functionality of the menu that there is always just the current item of the menu visible. If you click on the menu toggle all the menu items are visible. Thus you can Switch between a collapsed and uncollapsed menu. The toggle is always visible.
The functionality works. However there are many mistakes when resizing the width of the browser. Sometimes all is not at the same row, sometimes the collapsed menu is scattered, sometimes there is a line break between the logo title and the menu toggle etc.
Maybe everythings is related to the css display mode (inline-block, inline-Flex etc.)

In the attached Image you can see the folded and unfolded menu for the start page (top part) and the about page (bottom part) width different browser widths

I hope you can help me tackle this problem with different widths and the correct Display of the menu bar?

14

At the moment there seems to be three different width states width three different behaviour.

  1. width > about 900: all is fine. the menu is visible completely horizontally and all is in the same row

  2. width between about 700 and 900: this the oddball state. when the title logo is there the line breaks/wraps and moreover when I collapse/unfold the menu the menu items are aligned vertically (which is ok) but with a large padding/distance to each other and reach into the page container below the menu bar. this state has the most problems

  3. width below about 700: again there is a line break which shouldnt be there when the title logo is visible as well as the current menu item is visible (there would be enough space). apart from that the collapsed/unfolded menu looks all fine again

where should I adjust it? should I post my custom css code again?
all the best and cheers.
c

15

do you need more information?
what I basically need is that the menu stays always on top in the center and just wraps/breaks when the menu is collapsed/unfolded and the browser width is too small otherwise it should stay in the same row

I am a bit desperate at the moment. at the moment i think about trying to code my own menu and not to use the bootstrap/shapely one but that might be even more complex (?)