- This topic has 4 replies, 2 voices, and was last updated 6 years, 10 months ago by Tom.
-
AuthorPosts
-
May 17, 2017 at 2:24 am #319083sjoerd89
I am styling my navigation of the website and i am getting close to where i want it to be. A few issues i am having right now:
1. I only want my main navigation to have the bottom right corner rounded. But with my css it also does this for the subnavigation items.
Zilvertron mechanics & electronics – Uw partner in de kleine aandrijftechniek
2. I would love the sub items to be as wide as the top navigation items. And have the same height they look a lot higher at the moment.
3. Somehow the subnavigation with children lines up different then the ones without. (also can be seen in above picture)
Current CSS i have for this navigation:
.site-header { display: none; } .main-navigation .sticky-logo { position: absolute; left: 0; top: 0; height: 65px; } .main-navigation .sticky-logo img { height: 60px; padding-top: 15px; } .main-navigation .main-nav ul ul li { width: 200px; } .main-navigation .main-nav ul li.menu-item-has-children>a, .secondary-navigation .main-nav ul li.menu-item-has-children>a { background-color: #14377d; padding-right: 10px; padding-left: 10px; border-right: solid #2d71ba; border-bottom-right-radius: 15px 15px; } .main-navigation ul li a { background-color: #14377d; padding-right: 10px; padding-left:10px; border-right: solid #2d71ba; border-bottom-right-radius: 15px 15px; }
May 17, 2017 at 8:08 am #319152sjoerd89Btw site = http://www.sjoerdjonker.nl pass is sjoerdjuh
May 17, 2017 at 8:44 am #319165TomLead DeveloperLead Developer1. Replace your corner rounding CSS with this:
.main-navigation .main-nav > ul > li.menu-item-has-children>a, .secondary-navigation .main-nav > ul > li.menu-item-has-children>a { background-color: #14377d; padding-right: 10px; padding-left: 10px; border-right: solid #2d71ba; border-bottom-right-radius: 15px 15px; } .main-navigation .main-nav > ul > li > a { background-color: #14377d; padding-right: 10px; padding-left:10px; border-right: solid #2d71ba; border-bottom-right-radius: 15px 15px; }
2. Try this:
.main-navigation ul ul { width: 100%; }
3. You adjusted the padding of your menu items in the block of CSS above dealing with rounded corners.
May 17, 2017 at 11:50 pm #319626sjoerd89Man i wish i had your CSS knowdledge,
thanks a lot!May 17, 2017 at 11:55 pm #319633TomLead DeveloperLead DeveloperYou’re welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.