Docs

[Natalie]

Hi, I’m trying to have the navbar be the full-width of the boxed layout for my site:
wle-mekong-staging.waterandfood.org

I can’t get any of the code I’ve seen written here to work.
If there is some way to make it work, I was also wondering if the heigh could be adjusted and the height of the menu items within the navbar.

Finally, two small additions that would be nice: is it possible to put small divider lines | in between the menu items, and I know that .navbar{border-radius:5px;} will give me all nice rounded corners. What if I only want the top two corners to be rounded, possible?

Thank you so much in advance.

[Rue Nel]

Hello There,

Thanks for writing in! Do you want to have something like this:

If that’s the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-inline .desktop .x-nav {
    display: block;
    width: 100%;
    background-color: #f36f21;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
}

.x-navbar .desktop .x-nav>li:after {
    content: "";
    background-color: #000;
    width: 1px;
    height: 15px;
    display: block;
    position: absolute;
    bottom: 5px;
    right: 0;
}

.x-navbar .desktop .x-nav>li:last-child:after {
    content: none;
    display: none;
}

Hope this helps.

[Natalie]

Thank you, worked well! I added
.x-navbar .x-container.width {
width: 100%;
}
to it to make it full-width, so hopefully that works well together.

The spot beneath it is actually supposed to be my layerslider, which for some reason stopped appearing and I can’t figure out why. Do you by chance know what the issue might be? I can open a question if that’s a better way to handle it.

[Rue Nel]

Hello There,

Thanks for the updates! Did you have installed a caching plugin WP Super Cache or Autoptimize? Please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps.

[Natalie]

That did help, thank you. One last question. I adjusted the absolute margins in order to put the paperclip icon over the layerslider. When within cornerstone (where layerslider does not load), this works and it appears that the icon will overlap. But when I switch to real view of the page, I can see that the icon is directly underneath layerslide instead of over top of it. Is it impossible to make content overlap?

[Rupok]

Hi there,

I can’t see any absolute positioning for the paperclip icon rather some negative margin. Also it’s within different section. So not quote sure about the situation. Would you clarify why you are trying to achieve and what you are doing? Some screenshots would be appreciated.

Cheers!

[Natalie]

Hi sorry, here is a screenshot of what I meant. Where it is empty in the middle is where the layerslider shows up outside of cornerstone

[Rue Nel]

Hello There,

Please edit your page and remove the section 2. You need to insert the paper clip icon underneath the layerslider in the same column. Please do not forget to add a custom ID for the paper clip so that you can position it using custom css. You can make use of this code then;

#x-section-1 {
    position: relative;
    overflow: hidden;
}

#my-paper-clip {
  margin-left: -75px !important;
  position: absolute;
  top: auto;
  bottom: 0px;
  left: 50%;
  z-index: 100;
}

Hope this helps.

[Natalie]

Hi, I have tried that, but the bottom of the paper clip appears cut off by the second section

[Rue Nel]

Hello There,

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look and even create an example for you? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Natalie]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

#x-section-1 {
    position: relative !important;
    overflow: hidden !important;
}

And update it to :

#x-section-1 {
    position: relative !important;
}

Hope it helps.

[Natalie]

Hello, so I found that pretty much no matter what I did, the icon element will not overlap the slider. I’ve decided maybe that’s not the best thing to do anyway, so instead I wanted to have a down arrow divider element coming out of the first section. I used code from another thread:

.down-arrow .x-container {
  position: static;
}

.down-arrow .x-container:before {
  content: "";
  display: block;
  position: absolute;
  top: 328px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -50px;
  border-width: 50px;
  border-style: solid;
  border-color: #F36F21 transparent transparent;
}

It appears to work perfectly in cornerstone, as attached image shows. But then when I save and view it in normal browsers, including incognito and such (and caching has been turned off), the element is gone or hidden underneath the next section.

What am I doing wrong?

[Christopher]

Hi there,

Please update your code to :

.down-arrow .x-container:before {
    content: "";
    display: block;
    position: relative;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0;
    margin-left: -50px;
    border-width: 50px;
    border-style: solid;
    border-color: #F36F21 transparent transparent;
}

It should give you result like attachment.

Hope it helps.

[Natalie]

Hi, so so very close! I never meant for this to be so difficult! This code works but for some reason produces three arrows, one in the correct spot and then one in row2 and another in row4. I looked to see if i’d accidentally put the class into the rows, but it’s only in the section style box. I tried tweaking the code but I can’t figure out the issue.

[Author]

Posts