Making Text Stay Aligned With Other Content (using Bootstrap)

HTML & CSS
, ,
1

I’m trying to make make breadcrumb menu text move with other text that is specially centered to match a PSD file from a client. The class I’m talking about is .yellowbar_text

The yellowbar_text looks good at viewports below 1380px but if the viewport is bigger it does not follow the rest of the text content.
Here is my code below, forgive me, you’ll need to scroll down to see what I’m talking about:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    
  

        <div class="container" >
            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="row row_override">


                <div class="navbar-header col-xs-4 col-md-4">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            
                </div> <!-- END TOGGLE NAVIGATION -->



                <div class="logo_mobile_center col-xs-4 col-md-4 img-responsive">

                        

                </div><!-- END MOBILE IMAGE -->


                

            </div>

          

<!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse text-uppercase mobile_remove" id="bs-example-navbar-collapse-1">
            <a class="navbar-brand text-uppercase mobile_remove" ><b>Free Shipping</b> <span class="nav_text" >on Orders of $50 or more </span> </a>
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">How to Buy</a>
                    </li>
                    <li>
                        <a href="#">Order a Catalog</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#">View Order (35)</a>
                    </li>
                </ul>

            </div>
            <!-- /.navbar-collapse -->
            

            <div class="row logo_nav_bar">

       
	            <div class="col-xs-4 col-xs-offset-4 col-md-2 logo_img_div img-responsive text-center desktop_logo"></div>
	          

	            <div class="premobile_grouping">

		            <div class="col-xs-4 col-sm-3 col-md-2 findby_brand_spacing top_nav_subbar">

			            <div class="mid-column_width mobile_brand_spacing">
			            	<span class="small_type" >FIND BY</span><br>
				            <span class="top_nav_font">BRAND
										 <div class="dropdown">
										  <button class="dropbtn">&#x25BC;</button>
										  <div class="dropdown-content">
										    <a href="#">Link 1</a>
										    <a href="#">Link 2</a>
										    <a href="#">Link 3</a>
										  </div>
										</div><!-- DROP DOWN BUTTON END -->
							</span><!-- BRAND SPAN END -->
			            </div><!-- END THREE COLUMNS-->

		            </div>


		            <div class="col-xs-4 col-sm-3 col-md-2 top_nav_subbar mid-column_width findby_part_type">

		            	<div class="col-xs-10">
				            <span class="small_type" >FIND BY</span><br>
				            <span class="top_nav_font">PART TYPE <div class="dropdown"><button class="dropbtn">&#x25BC;</button>
											  <div class="dropdown-content">
											    <a href="#">Link 1</a>
											    <a href="#">Link 2</a>
											    <a href="#">Link 3</a>
											  </div>
											</div><!-- DROP DOWN BUTTON END -->



				            </span><!-- PART TYPE SPAN END -->
			            </div>

		            </div>


		            <div class="col-xs-4 col-sm-3 col-md-2 top_nav_subbar search_spacing">
				            <span class="top_nav_font">SEARCH 
	                                        <div class="dropdown">
											  <button class="dropbtn">
	                                              <span class="remove_arrow">&#x25BC;</span>
	                                              <i class="fa fa-search" alt="search icon" aria-hidden="true"></i>
	                                          </button>
											  <div class="dropdown-content">
											    <a href="#">SEARCH STUFF</a>
											  </div>
											</div><!-- DROP DOWN BUTTON END -->

				            </span> <!-- SEARCH SPAN END HERE -->
		            </div>

		            <div class="col-md-2 col-sm-3 col-md-2 top_nav_subbar number_right">
		            <span style="padding-left:20px;font-size:1.2rem;">GIVE US A CALL</span><br>
		            <span class="top_nav_font"><b>(800)555-1212</b></span>
		            </div>

	            </div> <!-- premobile group END -->

	            
            

            </div><!-- SUB NAV BAR FOR LOGO AND SEARCH MENUS -->

        </div>
        <!-- /.container -->

        
<!-- THIS IS THE CODE I NEED TO MATCH THE ALIGNMENT WITH THE REST OF THE CONTENT -->
        <div class="row">
		            <div class="col-sm-12 yellow_category_bar general_text">
		            <p class="yellowbar_text" >home / parent category / child category / spare parts</p><br>
		            </div>
	    </div>    


    </nav>

Any ideas? I’m sorry I don’t have this stored anywhere. I don’t have a server yet and jsfiddle and bootbly won’t support my plugins.

Here is an image of what I don’t want when I pull the browser viewport past 1380px.

here is what I do want when you move the viewport bigger or smaller

Make sense?

2

Not really as you don’t show any of your custom styles so we don’t know what code you are using. We really need to see a working page and as you are working for a client there is no excuse not to have a live version online somewhere otherwise how can you test properly? Local testing is ok for development but at some stage you need to test that it works online in the environment that it needs to work.

At the very least you could construct a working page for us to view using a defaulty bootstrap template.

e.g. Something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>


</style>
</head>
<body>

</body>
</html>

Of course you would need to include your custom css styles and size the image so we can see what the look like or use placeholder images at the right size.

As regards to your question about alignment then seeing as you are using bootstrap you would need to replicate the column structure in your breadcrumb row in as much as you would need an offset equal to the structure you are using in the other rows. You can’t just span 12 rows and center the content if you want to match other rows that have various column widths in them. Look at the bootstrap grid documentation (offsetting columns section) to see how to match rows and columns.

However, I find it illogical to move that breadcrumb’s left alignment to match the left of the logo and shipping as that will make the page look off-centred unless you then move the whole lot to be centred based on the breadcrumb which is the longer width. Otherwise the breadcrumb will wrap too early while there is still loads of screen space available. Your first example is actually the better approach and I wouldn’t let a client’s drawing dictate how something should work in the real world. Drawings are not websites.:slight_smile:

3 Likes
3

Agreed…on…well… really…everything you’ve said! I’m a newbie trying to gain enough skill to comply with web industry standards. This client is really a web firm (who believe in “pixel perfect layouts”) and I believe they are testing my CSS skills to get a job with them. After much research, I honestly don’t believe pixel perfection is “professional.” It really depends on who you talk to. And though I don’t have server access (yet), I do intend to have my own portfolio soon. I’m afraid I don’t have time to construct a viewable online bootstrap template for a fix so small.

Thanks for the input and sorry for the lack of necessary details.

1 Like
4

Yet you expect me to build one to test for you lol :slight_smile:

I already gave you the template just throw your html and custom styles into it and you are almost there. It will work locally as long as you supply image dimensions or use the placeholders I mentioned. :wink:

Please read the POSTING BASICS thread as it contains a lot of help so that we can help you.

Notwithstanding the above I believer I already gave you the answer anyway and you need to look at offsetting the columns as mentioned in my previous post.

5

This makes sense. My apologies for the frustration.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.