Topbar styling - Best Methods

[rocketboy]

I’ve been spending a lot of time trying to style the header via css and keep having issues with browser sizing. I’ve tried a lot of different alternatives for example adding a separate div class to surround the divs to house in the white background. This code below has worked the best so far but not anywhere close as far as responsiveness.

Do you have any alternatives to styling the top header bar, would something like the pro builder have more control and serve this objective better? Or do you have any code examples to best layout a few lines of contact text?

website: https://rocketboysolutions.com/applsys

Currently I have this text in my top bar content:

  <div class="scroll-left"><p>NOTICE: Visitor access to our facilities have been restricted through January 8, 2021 to protect our team, their families, our community, and you. All meeting requests will be managed virtually through phone, webinar, or “Zoom” type conferencing.</p></div><br />
<br />
<div class="topleft">Phone: <a href=\"tel:8172494180\">817-249-4180</a></div>

<div class="topright">Located: <a href="https://www.google.com/maps/dir/32.7324835,-97.4705944/Applied+Systems+Engineering+Benbrook,+TX+76126/@32.7090193,-97.4793622,14z/data=!3m1!4b1!4m9!4m8!1m1!4e1!1m5!1m1!1s0x864e0d4e6b595d41:0x99834a2d4c2d6689!2m2!1d-97.4446716!2d32.6907577">7510 Benbrook Parkway, Fort Worth, TX. 76126</a></div>


The CSS for this currently is:
.x-topbar .x-social-global { display: none; }
.p-info { display: none; }
.x-topbar {
  	font-size: 16px !important; 
  font-weight: 500 !important;
		color: #000 !important; 
letter-spacing: 1px;  border-color:#282828; 
  background-color: #fff; 
  height:60px; }

.x-topbar a {   display: inline-block;
 color: #000 !important; text-decoration:none !important;   }

.scroll-left {width: 100%;
 overflow: visible; white-space: nowrap;
 position: absolute !important;
 width:100%;  
}
.scroll-left p { 
  padding-top:2px;
 font-size:16px;
 text-transform: uppercase;
 color: #ff0000 !important;
 position: absolute !important;
 margin-top:-.8%;
 display:block;
 width: 100%;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 20s linear infinite;
 -webkit-animation: scroll-left 20s linear infinite;
 animation: scroll-left 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
.topright {float:right; margin-top:-2.7%; padding-top:6px; padding-bottom:4px;}
.topleft {float:left; margin-top:-2.7%; padding-top:6px; padding-bottom:4px;}

Any help would be greatly appreciated, is there anyone you recommend that I can pay to help with CSS?

Thank You

[ruenel]

Hello Bryce,

Your code is applied throughout all the screen sizes. You need to make additional CSS for the smaller screens. On smaller screens, there isn’t enough space to display the left and right text, you must disable the float or set it to none instead. You also need to set the height of the topbar to auto. You can make all this by utilizing the @media rule.

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Therefore, you may add something like this:

@media(max-width: 767px){
    .x-topbar {
        height: auto;
    }

    .topleft, .topright {
        float: none;
        text-align: left;
    }

    p:empty {
        display: none;
    }
}

And you will have a display like this:

Be advised that the code above is just an example. You are free to adjust the codes and add your own version of it. Since this is using custom CSS code, you will be the one to maintain the code whenever there are theme and plugin updates to make sure that it does not create any issue or conflict.

Best Regards.

[rocketboy]

Thank you for your input! Do you have any ideas what to do when position: absolute !important; isn’t working? For example for the scrolling text the height position changes with the browser size when absolute is used in positioning.

Thank you!

Bryce

[ruenel]

Hello Bryce,

Please do not use % in your margins because it will vary on different screen sizes. Please use em or px instead.

Best Regards.

[rocketboy]

That’s exactly the issue, thanks a lot for your help!

[ruenel]

Hey Bryce,

You’re welcome!
It’s good to know that it has worked for you.

Cheers.