Content In Bar Moves From Left To Right When Browser Changes Size

You can add further CSS statements in the style.css of the theme to design the bar content as desired.

Thanks for your reply, Martin.

I have tried that, but with my limited knowledge on “CSS statements” I have gotten nowhere. What is the code for adding a space as per the title of this post?

…in other words, I mean position the content so it is stabilized and does not move when the browser size is changed.

In general you can address the bar with the CSS selector
#scb-wrapper.

If the bar is in fixed position the selector is
#scb-wrapper.scb-fixed

What do you mean with “stabilized”? A fixed width? Then the statement is like

#scb-wrapper {
    width: 700px;
}

To make that responsive use media queries.

I’ve tried playing with that code — and it does adjust the width — but the content I have on the contact bar keeps moving (i.e. it is not in a fixed position).

For example: as it is right now, the content on the contact bar stays in the same spot. However, if I take the mouse and increase the width of the browser, the content in the contact bar moves.

So, depending on the size of your browser — whether you have it full screen or smaller — the content within the bar is in different places.

What I want to do is “stabilize” or “fix” this content into a definite and certain position that does not move when the size of the browser screen is changed.

I think what I need to adjust is the following:

div#scb-wrapper 1606px x 80px

Maybe, say, if the “wrapper” was a smaller width, the content would stay put.

The safest way for that is the left alignment. Then the contet stays at the same position in every browser width (until the browser width is smaller than the content length or is in the size of mobile displays). With the option “Horizontal alignment” you can set a space between the left browser border and the bar content to align the bar content with the page content. Would that be ok?

Well, I think I know what you mean.

What I did was align left (where it does stay fixed in the same position regardless of the size of the browser) and then adjust the horziontal padding to move it over to the right. However, the content keeps moving depending on the size of the browser.

As a test, I did a center-align and the content always stays put in the center, regardless of the size of the browser. I then adjusted the horizontal padding to move the center all the way to the left. This kept the content on the right but with center-align selected.

Unfortunately, the content still moves. I also cannot have the content on the left because it clutters the left upper corner of the webpage (I have stuff there already).

Please tell the address of your site. I could take a look at it.

I would rather not publish… Can I send you an e-mail?

Please write to m dot stehle at gmx dot de.