Stacking In TopBar

Support
#1

I would like the buttons in the top bar to be above the social icons during mobile view.

https://www.Ashlandchurch.org

I used this to make them stack in the past:
@media(min-width: 768px)

However, it is not working now.

Please help.

#2

Hello @gallagherBD,

Thanks for writing in! Please make sure that your custom CSS is valid and correct. Normally, having the @media block will go like this:

@media(min-width: 768px) {
   .element {
      /* your element styles */
   }
}

By the way, @media(min-width: 768px) {} is not meant for mobile view. You will have to use @media(max-width: 768px) {} instead. For more details, kindly check out this CSS codex:

Best Regards.

#3

Thanks for the quick response.

When I add “@media(max-width: 768px) {” it removes the formatting of the buttons themselves.

The CSS I used was from the staff at Themeco. It should be valid.

Let me know your thoughts because I really want to keep the buttons and not lose their formatting.

#4

Hello @gallagherBD,

Please send in the code in your next reply. It would also great if you can apply it to your site so that we can investigate why it is not working for you. You may have just inserted it incorrectly.

Thank you in advance.

#5

Here is the code:

@media(max-width: 768px) {
.my-button{
float:right;
background:#adc98c;
color:white;
display:inline-block;
padding:10px;
margin-right: 10px
}
}

#6

Hello @gallagherBD,

Do you want to display the buttons like this?

Screen Shot 2020-12-05 at 11.52.03 AM
Screen Shot 2020-12-05 at 11.52.03 AM908×910 121 KB

If that is the case, kindly remove the float: right; in your code.

#7

I have that done, but with the code like this, the buttons lose their background color and spacing on non-mobile view.

#8

Also, I removed the right align and they are not stacked on mobile.

#9

Hello @gallagherBD,

The following code will not remove the styling of the buttons:

@media(max-width: 768px) {
	.my-button{
		background: #adc98c;
		color: white;
		padding: 10px;
		margin-right: 10px;
	}
}

It may only happen if you have inserted a broken CSS code.

#10

Take a look. I added that code and removed the old and I cannot see the formatting of the buttons on normal website view.

It did, however, fix the mobile stacking

#11

Hello @gallagherBD,

To keep the button styling for both desktops and smaller screens, you should have a code like this:


.my-button{
	float:right;
	background:#adc98c;
	color:white;
	display:inline-block;
	padding:10px;
	margin-right: 10px
}


@media(max-width: 768px) {
	.my-button{
		float: none;
	}
}

Be advised that this is just a sample code. If this works out of the box, you will be the one to maintain this code whenever there are theme/plugin updates to make sure that the code still works for your site.

Best Regards.

#12

That worked.

I tried to throw a little padding to create some separation from the buttons to the social icons in mobile view, but it is not happening. any tweaks?

#13

Hi @gallagherBD,

Add this code also in theme option’s CSS

@media (max-width: 767px){
 .x-topbar .p-info { 
   margin-bottom:20px;
 }
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

#14

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