How do I apply a radius to the menu section of a page?

  • 1
  • Question
  • Updated 7 years ago
I am playing with my site and I wanted to see the menu with a radius but I can't seem to make that work. I thought by adding a radius line to the div it would be applied, doesn't seem to work. I added the menu div showing my attempt.

div#menu {
float:right;
width:956px;
margin: auto;
margin-left:0;
background-color:#e1e1e1;
radius:5px;
}

Help!
jmack
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
  • posistive someone will know the answer

Posted 7 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You may try this.

div#menu {
float:right;
width:956px;
margin: auto;
margin-left:0;
background-color:#e1e1e1;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
I tried adding your recommendations without any success. Thanks for the suggestion, I am open for any other suggestions.

Jmack
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Can you tell us your site address?
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
The site is www.mrgrip.ca and it is unpublished.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Can you either publish it or I could you tell me the Style you have used in setting up your site and see if I can locate the relevant code there to play with it?
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
The style I am working with is Premium--->Classic Line--->Furniture Company.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thanks for that.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi jmack,

If you use FireFox or Chrome for example to view your site you will notice round cornered nav elements but with IE 8 and less you will see square nav elements. I don't have IE9 so I can't say what the effect is with that specific browser.

This has been set up by Yola..
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
Thank you for your help, I will wait to hear back from Yola

Jmack
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
Hi Gop,

I figured out how to apply a radius to the nav menu but I cannot find the div to change the color of the exposed corner under the nav menu.

So I have a blue page background and a different shade of blue nav menu with a tiny white space between. Any idea where I might change the color to a shade of blue.

Thanks,
Jmack
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I would have to see it to find the element with a tool. Happy to look if you can publish your site for a while.
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
the site is published www.mrgrip.ca, I checked and I only see the radius in Chrome and IE, Firefox not displaying radius. The site is not completed and I have business cards and marketing material out there with the address so I don't want it published very long. I appreciate your help!
Jmack
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The small triangle of white is because of the ultimate background of your style being white. The code for the radius is in effect etching the upper layer to expose the under layer.

The different radial effects are because of the way that the different browsers handle the radius. You really have to set up three statements to cover your bases. See back a few posts ago where I gave you the three but they are easily found on the web.
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
Can I change the ultimate background color?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This is a conditional answer jmack :)

It depends on the Style you are using.

What you could try is to go back to Style>Edit Background>Change Background

Uncheck "Use a background Image"

Select a background colour to match your need.

Save this

Then return again and Check "Use a background image"

Select your background image

Save

And see how it goes.

I would do this on your index page because sometimes and some Styles don't carry through and you have to do the process on each page. I have found with the old Style "Clean Slate" that was the solution but slightly different to your need.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
With your radius statements are you using a "background-color: #xxxxxx" with your code?
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
The background color doesn't seem to apply to this white triangle and I do have background-color set in the radius statement.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Can you see the colour element associated with the original template anywhere and if so can you change this?
Photo of jmack87

jmack87

  • 22 Posts
  • 0 Reply Likes
I just went through the code and If there is a element associated I don't recognize it.