vertical align navigation

Bootstrap Studio Help
1

Hello. I am new to using bootstrap studio. I am learning how to use this program. I created a clean navigation that is 100px in height. My navbar is right aligned but it is aligned to the top of the nav area. How do I verticaly center the navigation and any other text for that matter?

2

Hi, Select the section that contains the menu then go to navbar collapse / direction and select row reverse.

Screen capture

3

as i understand your question,

<code> but it is aligned to the top of the nav area. How do I verticaly center the navigation and any 
other text for that matter? </code> <br> <br>

you want to vertically center / middle the content. <br> <br>

TIPP: <br> <br>

To follow up, what's the behaviour of the cascaded components, you may activate Live Preview in the Browser and the activate the "Site Inspection" with the right Mouse-Button in the Browser-Area (or the Menu) <br> That for i prefer chrome and firefox.

Next Steps are indicated by "BS" or "CSI" (Chrome Site Inspector) and refer to Chrome: <br><br>

Selecting the Component in the OVERVIEW-Pane and the the corresponding entry in the HTML-Pane will show the pre-defined styles in the STYLES-Pane in STALES-Tab. <br> <br>

  1. CSI: Select <strong> Elements </strong> in Developer Tools and <strong> Computed </strong> in the right pane of it. <br> You will see an entry <strong> align-items: center </strong> <br> This should cause the alignment of the inside to be aligned at the cross-angle - but mostly does not work vertically.<br>
    2. <br>
  2. BS: Modify the Styles for the Navbar:
    • Select Navbar inside <strong> Block </strong> Navigation Class in <strong> OVERVIEW </strong> -Pane
    • Select the corresponding < nav class="navbar navbar-light navbar-expand-md navigation-clean >
    <br> 
    You will see the pre-defined styles of bootstrap (locked) and the component - Default:  <code> Navigation-Clean.css </code> 
which you can open in an extra Tab by klicken on its name on the right side of the STYLES-Pane &lt;br&gt; &lt;br&gt;

<li> Add an new entry for the Navbar Component, either in <code>Navigation-Clean.css </code>, the <code> STYLES </code> 
Tab or - i think its the best - your own new created Styles-CSS File &lt;br&gt;
<strong> BS:  </strong> With selected <code> &lt; nav.. &gt; </code> in HTML-Pane:
<ul>
    <li> Create new CSS Block, which be named acc. Component-Tag or better ID or CLASS if provided&lt;br&gt;
    Note: It's best to give CLASSs right from the beginning for that purpose, as you may wish to give 
    other nav of that type other behaviour - if you need to change Styles or Entry on the life website 
    you should give an ID &lt;/br&gt; &lt;br&gt;
    If CLASS or ID is given, the new CSS-Block is named that like, eg. <code>.mymainnav { } </code> as for a CLASS </li> &lt;br&gt;
  3. Inside that CSS-Group add an entry: <br> <br> .mymainnav { <br> align-content: middle; <br> }
    4. <br>
4

You guys do understand that you don't need to use code in the forums at all right (unless you're posting actual code, then just highlight it and hit the code braces icon in the edit menu above)? If you hit enter, it puts your text on the next line (unless you edit it after it's posted lol, then it tends to mess up, many bugs on this forum). Just thought I'd point that out because so many people are using a ton of break codes and such and it's just not needed.

Testing this right now to make sure something isn't actually broken that wasn't lol. (if this line is 2 lines from the last one then all I hit was the enter key twice and it moved to the next lines to type).