rounded corners around website without a border

[megfenn]

Hi, I’m trying to work out how to get rounded corners around the website without a border. I tried inputting a background color, but the borders still don’t work. Here is an example of what I want to achieve. Please could you advise? Thanks. http://www.lmhrconsulting.co.uk/dev/design6b.html

[scrambler]

It depends on the exact configuration of your site, so always include a link to your site.

You Probably need:

Main options > Wrapping Areas > Wrapper Area > Rounded corners > All 4 corners

Main options > Header> Header Area > Rounded corners > Top corners

Main options > Footer> Footer Area > Rounded corners > Bottom corners

But depending on the exact composition of your site you may also need some custom CSS which we cannot know until we have a link

[megfenn]

Ok sorry. Here is the link to the site in development. http://www.lmhrconsulting.co.uk/dev/ I need it to have rounded corners like on the design it’s based on which can be seen here: http://www.lmhrconsulting.co.uk/dev/design6b.html Hope that helps. Thank you.

[megfenn]

I have already done Main options > Wrapping Areas > Wrapper Area > Rounded corners > All 4 corners BUT the only way I could get that to work was to tick the border box. BUT I don’t want it to have a border.

[scrambler]

There is no reason the border should be needed.

Keep the wrapper 4 corners selected, but uncheck the border option and post back so we can see what is going on

[megfenn]

It’s working without the border now. Very strange as it wasn’t before. How can I adjust the curve? It needs to be a larger round corner. Thanks.

[scrambler]

It is a “Plus” option in Main options > Fonts & Custom.

Without “Plus”, you need to add a Rule in Main Options > Fonts & Custom > Custom CSS Rule box with the value you like (default is 8px)

if you want to change the radius of the Theme option  use

.rounded,.rounded-all,.rounded-custom {-moz-border-radius:8px!important;-webkit-border-radius:8px!important;border-radius:8px!important}

If you want to just change wrapper use

#wrapper {-moz-border-radius:8px!important;-webkit-border-radius:8px!important;border-radius:8px!important}

By the Way, there is a problem on your page. The Header HTML area is set for a Width of 100% which causes it to expand right and cause a horizontal scrollbar to appear. Check Main options > HEader > HEader HTML > Width box. If there is something in there remove it.

If there is nothing, and given you used a position absolute;left:25% on it, put 75 in the width box so the total is 100%

[megfenn]

Thank you very much. I’ve changed the header html. Is it OK now and not showing the horizontal scrollbar anymore?

[scrambler]

The scroll bar is gone, but the design it totally non responsive!

Observe what happens when you shrink the width of your browser, your header HTML and menu are getting way out of place as the width reduces.
Also the mobile menu opens up over the content, not sure if that is intentional

1- To improve the positionning of the header HTML, repalce bottom:110px in your custom CSS by top:15%
#header-html {position:absolute; top:15%;left: 25%;}

Also replace the padding:40px in your custom CSS rule below by a percentage

#headerstrapline {font-family: ‘Varela Round’, sans-serif; padding-top: 7%; color: #5F0092; font-size: 30px;}

2- To fix the positionning you did on the menu bar
Change your rule
#nav-primary {position: absolute; top: 230px; left: 4%; z-index: 100;}
to
#nav-primary {position:relative;z-index:100;margin-bottom:-20px;}

And add
.menu-primary .wvrx-menu-container {display:inline-block;}

Play with reducing the browser width and open the mobile sub menu, and let me knwow if you need a different behavior / tweak

[megfenn]

Fantastic. Thanks very much. But how can I get the menu bar to sit in the middle instead of being aligned left? Thank you!

[scrambler]

Change the rule

#nav-primary {position:relative;z-index:100;margin-bottom:-20px; margin-left: 4%;}

to

#nav-primary {position:relative;z-index:100;margin-bottom:-20px; text-align:center;}

This will also center the slide open mobile menu. If you don’t want that make it

.is-desktop #nav-primary {position:relative;z-index:100;margin-bottom:-20px; text-align:center;}

[megfenn]

Thank you!

[Author]

Posts