Display Inline

Beaver Builder
1

Hey there, I am trying to use a widget module to display a menu inline instead of stacked.

I gave the module the CSS class .ministrymenu and provided the following code. .ministrymenu { display: inline; }

Didn’t work. Any ideas?

2

Hey andrewpeters,

Could you please share your Website URL with me so I could tell you the correct CSS snippet to do this? Maybe share a page where you are working on the widget module so we can check?

Thanks!

KC

3

[Content Hidden]

4

Hey andrewpeters,

I couldn’t locate the class “ministrymenu”. Anyway, try out this CSS snippet. Is this what you are looking for by chance?

.menu-ministries-container #menu-ministries li {
	display:inline;
}

/* Center Menu */
.menu-ministries-container {
	text-align:center;	
}

Thanks!

KC

5

Hmm…

Maybe I did that wrong? Is there a tutorial on how to give a module a class?

Also, how can I make the text on this menu larger?

6

Hey andrewpeters,

Check out the screenshot below on how to insert a class to a module. Try this CSS snippet and let us know how it goes. :slight_smile:

.menu-ministries-container #menu-ministries li {
    font-size: 30px; /* Your preferred font size */
}

Thanks!

KC

7

I thought this would be a good fix for every site, but I can’t seem to get it to work here.

http://demo2.creativeministrydesign.com/about/

It’s the ‘about’ menu. I have added the code:

.menu-about-container #menu-about li {
	display:inline;
}

/* Center Menu */
.menu-about-container {
	text-align:center;	
}

: to the CSS but no change. The difference between the two sites is one was using Genesis and this one is using BB.

I also tried this, which work on a social icons menu on another site:

.menu-about-container #menu-about li {
	display:inline;
	padding-right: 10px;
}

/* Center Menu */
.menu-about-container {
	text-align:center;
	padding-right: 10px;
}

but still nothing.

8

Hey andrewpeters,

I can’t seem to locate the CSS snippet you mentioned above when I inspected your Website. Could you please check if you’ve inserted the CSS snippet correctly in Appearance > Customize > Code > CSS Code. If the issue persist, do you mind sharing temp admin access to the site so we can check further? You can use the private reply option below.

Thanks!

KC

9

It’s there. Copied and pasted right from my CSS.

/* Diplay About Menu Inline */
.menu-about-container #menu-about li {
display:inline !important;
padding-right: 10px;
}

/* Center Menu */
.menu-about-container {
text-align:center;
padding-right: 10px;
}

10

[Content Hidden]

11

It seems I have some conflicting CSS between the menus I want to display inline and the side menu area where I’m aligning the icons and text like I want.

12

Hey andrewpeters,

It seems working now. I’ve just copied the code and pasted it on the top of the CSS code section. I’d suggest that you check the rest of the CSS code for errors. Let us know how it goes.

Thanks!

KC

13

I found the culprit. Should have updated the thread. My bad.

14

Hey andrewpeters,

Glad that worked for you, enjoy BB and let us know if you need anything further! :slight_smile:

Thanks!

KC