Jiliapp login register download.Makakuha ng libreng 700pho sa bawat deposito

midoripain
(@midoripain)

2 years ago
Hello Together

I have the problem, that when I center the menu, there is an line break to soon.

I’m using OceanWP and Elementor.

Thanks for your help

Patrick
- This topic was modified 2 years ago by midoripain.
The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Shahin
(@skalanter)

2 years ago
Hello @midoripain,

Please check this screenshot: https://i.postimg.cc/3NRFjKbG/001.png. There is a not aligned padding for the header, please remove it(you can edit this padding from Customizing > Header > General), then, please put the CSS below in Customizing > Custom CSS/JS > CSS Code:
```
.center-menu #site-navigation {
    width: fit-content;
}
.center-menu #site-navigation #menu-main-menu {
    width: 850px !important;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
```
Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Result: https://postimg.cc/YvP12PQP.

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope that helps.
Best Regards
Thread Starter midoripain
(@midoripain)

2 years ago

Hello @skalanter

Thank you for your input.

I have adapted it as you said, but had to keep the paddings for left and right, because without them the logo was direct on the left side.
But the line break didn’t occur with this change, just some small overlay if I minimized the windows.

https://postimg.cc/R6gP9TgR

But this isn’t a big problem, may I change the breakpoint for tablet modus.

Best regards
Shahin
(@skalanter)

2 years ago
Hello @midoripain,

How to implement and customize the header is not standard according to design rules, and that causes the issue, which you have already sent a screenshot of.

To solve this issue, you can use the container as a wrapper for the website’s body content, so ensure the header is not full width; instead of this, set a specific width for the container. Please follow the steps explained in this link: https://docs.oceanwp.org/article/120-customize-your-layout-widths.

Or, if you prefer using full-width content, you should remove the extra padding on responsive sizes(the previous reply). It’ll be the result: https://i.postimg.cc/2yqMVD8Y/image.png.

Also, you can use this CSS to solve that extra padding only for specific device width(s). Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:
```
@media(min-width:128px) and (max-width:1366px) {
    #site-header-inner {
        padding: 0 30px 0 30px;
    }
}
```
Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope that helps.
Best Regards

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Menu Line break to soon’ is closed to new replies.

Tags