Docs

[AlCAt]

Hi,

I would like to apply the following modifications for the mobile version of my website:

1. Remove the button background completely. I have tried to make it transparent but I can still see the borders.

2. Remove the nav bar background for mobile & tablets only

3. Move the position of the menu on the top left (Cf. Attached screen shot)

Thank you for your help.

[Nico]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[AlCAt]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
.x-topbar {
  margin-left: 100px;
  margin-right: 100px;
  position: relative;
  z-index: 9999;
}
.x-btn-navbar, .x-btn-navbar:hover, .x-btn-navbar.collapsed {
  background-color: transparent !important;
  border: medium none;
  box-shadow: none;
  float: left;
}
.x-navbar {
  background-color: transparent !important;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9998;
}
}

Hope this helps.

[AlCAt]

Hi Rupok,

It’s working perfectly. Thank you.

1 . Is there a way it can over lap the whole screen (Now the drop down is conflicting with the logo)?

2. Can I also ask you here for the CSS to change the submenu background color and text color separately from the nav bar? None of the CSS codes I have found on the forum work for me.

Thank you,

[Paul R]

Hi,

1. Not sure what you mean, you can try adding a background color to your navbar.

@media only screen and (max-width: 979px) {
.x-navbar {
    background: #000 !important;
}
}

2. You can add this in Custom > CSS

/* submenu background */
.x-navbar .sub-menu {
    background-color: red !important;
}
/* submenu color */
.x-navbar .mobile .x-nav li a {
   color:blue;
   border:1px solid blue;
}

Hope that helps.

[AlCAt]

Hi Paul!

Thank you for the codes! It’s working great! I would have a few additional questions:

1. Can I change the font color and add transparency to the background for the desktop submenu only?

2. The menu button on mobile is now properly placed but I have a plain black background covering the menu button and social media buttons. Can I add transparency to this bar?

3. I have added in the past a black background that reveals when hovering the pointer over the image background on the header of my homepage. Can I have this effect only to apply on desktop? Here is the CSS I used before:

/* Black hovering background */
header.masthead.masthead-stacked {
    position: relative;
}

header.masthead.masthead-stacked:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background 1s ease;
}
header.masthead.masthead-stacked:hover:before {
    background-color: rgba(0,0,0,0.65);
}

Thank you very much for your help.

[Rupok]

Hi there,

Thanks for writing back.

#1. You need to use RGBA color to add background with transparency :

/* submenu background */
.x-navbar .sub-menu {
    background-color: rgba(0,0,0, .5) !important;
}
/* submenu color for dekstop */
.x-navbar .desktop .sub-menu li a {
  color: red;
}

#2. Let’s add this CSS :

@media only screen and (max-width: 979px) {
.x-navbar {
  background-color: transparent;
}
}

#3. You can place the code within a media query :

@media only screen and (min-width: 980px) {
/* Black hovering background */
header.masthead.masthead-stacked {
    position: relative;
}

header.masthead.masthead-stacked:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background 1s ease;
}
header.masthead.masthead-stacked:hover:before {
    background-color: rgba(0,0,0,0.65);
}
}

Hope this helps.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[AlCAt]

Hi Rupok,

Here are my feedbacks:

1. Code works great!

2. No effect on the black top bar in the mobile version

3. No effets

Thank you,

[Paul R]

Hi,

2. Kindly change the code that reads.

@media only screen and (max-width: 979px) {
.x-navbar {
    background: #000 !important;
}
}

to this

@media only screen and (max-width: 979px) {
.x-navbar {
    background-color: rgba(0,0,0,0.5) !important;
}
}

You may change 0.5 to adjust the transparency.

3. Please try this code instead.

/* Black hovering background */
@media (min-width: 980px) {
header.masthead.masthead-stacked {
    position: relative;
}

header.masthead.masthead-stacked:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    transition: background 1s ease;
}
header.masthead.masthead-stacked:hover:before {
    background-color: rgba(0,0,0,0.65);
}
}

Hope that helps.

[AlCAt]

Hi Paul!

Both codes are working perfectly! Thank you guys a lot! 🙂

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts