How to remove mobile menu container for one item & make button full width

Support
#1

I want to make the button full width & remove the black border on mobile(old thread https://theme.co/apex/forum/t/how-to-remove-the-url-field-in-the-comments-field/3230/29?u=faizan)
The previous code for an unknown reason stopped working . Please help. Thanks.

Also, on blog and portfolio page, the menu item form family changes for mobile as well as desktop. On all other pages its fine.

#2

Hello There,

Thanks for posting in! To resolve your issue and remove the border, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-nav-wrap .x-nav > .ctamain.menu-item a{
    border: none;
}

Regarding your menu item in blog and portfolio page, could you please clarify it or even send us some screenshots?

Thank you in advance.

#3

1.Hi, The code did not make the button full width, though it removed the border.
2. The font on portfolio page menu looks like

3. The font on homepage menu looks like(this is how it should be)(both are different font styles if it’s not clear by image)

— What I mean is different styles of fonts loading on some pages while different font on some other page.

#4

Hello There,

Thanks for updating in!

1.) Please update the given css to force the button to be fullwidth. You can make use of this code:

.x-navbar .x-nav-wrap .x-nav > .ctamain.menu-item a{
    border: none;
}

.x-navbar .x-nav-wrap .x-nav > .ctamain.menu-item a span,
.x-navbar .x-nav-wrap .x-nav > .ctamain.menu-item a span .x-btn{
    width: 100%;
}

2.) The font family is different because in your homepage, you have added a raw content and that you inserted this:

p,h1,h2,h3,h4,h5,h6,span{
  font-family: geomanistregular, Arial;
}

If you want to apply this globally, you will have to add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

Hope this helps. Please let us know how it goes.

#5

It worked. Thank you!

#6

You’re welcome.

#7

Hi,
Can you please help how can I remove number of comments from posts and Blog page? I was sucesful in removing via CSS but the “/” was still there.

#8

Hi There,

Please also add this CSS:

.p-meta>span:nth-child(4),
.p-meta>span:nth-child(3):after{
    display: none;
}
#9

It worked. Thanks.
One more thing I am facing is on the blog posts the gap between header and below that is too much. .

#10

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar-inner {
    min-height: auto;
}
#11

That didn’t work. But I found a solution. Thanks.

#12

You’re welcome!