Docs

[lemag]

Hi,

I am trying to create a button like the green one saying “Login” on this page http://elearningwp.thimpress.com/

My website is http://excelexplained.com/

I tried creating a new class “login-button” and assigning it to the link but for some reason the button was spreading across the entire menu section vertically which I do not want. Can anyone please share the css code to create a button similar to the one showed? I want to modify the hover as well so that the button changes color and the underline is removed but I can’t seem to get it done.

Also, the button looks strange when the resolution is set to mobile (different that the rest) which I do not want.

I would really appreciate it if someone could help me out since my css skills are very limited.

Thank you.

[Joao]

Hi There,

Just have the normal link text without a class assigned, this will apply to the last link of the navbar.

.x-navbar .desktop .x-nav>li.menu-item-type-custom>a>span {
  padding: 10px 20px;
  background-color: #27ae60;
  color: #fff;
  border-radius: 5px;
  padding-top: 10px;
  margin-top: -8px;
}

.x-navbar .desktop .x-nav>li.menu-item-type-custom>a:hover>span {
  padding: 10px 20px;
  background-color: #27ae80;
  box-shadow: none;
  margin-top: -8px;
}

You can adjust the margin-top and other parameters according to your wishes.

Hope that helps,

Joao

[lemag]

Thank you for the reply. I have added the code but this changed the last 2 links, not only the last one. Am I missing something? Is this applying the style to all menu items created as “custom links” (because this is not what I am looking for)?

Also, if I want to modify other menu items but not for mobile should I add the .desktop when I modify a css class?

Thank you.

[Joao]

Hi

Lets try a different approach, you will add the button looking using the ID of the menu Item

Please add to Customizer / CSS your customizer instead, this way we will add the customizations using the menu item ID

.x-navbar .desktop .x-nav>li.menu-item-164>a>span {
  padding: 10px 20px;
  background-color: #27ae60;
  color: #fff;
  border-radius: 5px;
  padding-top: 10px;
  margin-top: -8px;
}

.x-navbar .desktop .x-nav>li.menu-item-164>a:hover>span {
  padding: 10px 20px;
  background-color: #27ae80;
  box-shadow: none;
  margin-top: -8px;
}
 

To make changes on desktop menu you will use a path like this:

.x-navbar .desktop .x-nav li a {
color: red;
}

Hope that helps,

Joao

[lemag]

That worked like a charm.

How can I remove the hover underline from the links and also from the current page selected?

Thank you.

[Darshana]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}

Hope that helps.

[lemag]

Thank you. This solves it.

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[lemag]

Is there a way I can properly display the image in the first section of this page? http://excelexplained.com/microsoft-excel-basic-course/

I have used Cornerstone to place the image as a background image for the section but for some reason the image is not displayed entirely. The upper and lower parts are truncated. Is there another way to place an image as a background and use text over it while displaying the entire image?

Thank you.

P.S.: Should I open a new Thread for this topic or can I just continue asking questions in here?

[Lely]

Hello There,

We can answer this question here but moving forward please open a new thread for different topic. It is important for the issue to be relevant for the benefit of other users searching for answers.

That is because the height of the background will depend on the content of the section. We need to add space either on top or below that section when it is on desktop view. Please add GAP element at the top of the header text and below the main text. Then add the height depending on what you need. Check HIDE BASED ON SCREEN WIDTH property of this GAP element and select XS and SM to make sure that this space is not visible on mobile screen.

Hope this helps.

[Author]

Posts