HTML/CSS Code Help regarding Menu and Submenu

dipanjan94

Hello, I have three questions.
1. In my website, I have two pages where I have an image stretching behind my header - my homepage https://www.dipanjanpal.com/ and my blog https://www.dipanjanpal.com/Blog. In both these pages, if you hover over the menu items, you can notice a small white space under my menu and above the first sub-menu (hover on Portfolio for example and notice the white space over 'Aerial' sub-menu). This doesn't happen for other pages, only happens for these two. Also, when I want to add content blocks, it has a white opaque background (I have this background for my accordion menu in mobile for exactly these two pages). How can this be fixed? Attaching two pictures for easier understanding.

2. How do I increase my sub-menu spacing for PC and for mobile (I have accordion menu on mobile)? Also, for the accordion menu in my mobile and I want center the top-level menu items. How can this be done?

3. In my page https://www.dipanjanpal.com/Prints , due to some clumsy HTML/CSS coding, I have a widget with grey background where there is too much of space in my mobile. It looks perfect for PC though....I couldn't balance between the two, possibly because I picked up some lines randomly from the internet to try it out. Can anyone get it done in a cleaner way so that the spacing in mobile isn't too much (or something I can control using margin/padding etc?)

Hikin' Mike

@dipanjan94 said:
Hello, I have three questions.
1. In my website, I have two pages where I have an image stretching behind my header - my homepage https://www.dipanjanpal.com/ and my blog https://www.dipanjanpal.com/Blog. In both these pages, if you hover over the menu items, you can notice a small white space under my menu and above the first sub-menu (hover on Portfolio for example and notice the white space over 'Aerial' sub-menu). This doesn't happen for other pages, only happens for these two. Also, when I want to add content blocks, it has a white opaque background (I have this background for my accordion menu in mobile for exactly these two pages). How can this be fixed? Attaching two pictures for easier understanding.

The white space is because you have this:

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
    padding-top: 10px;
}

2. How do I increase my sub-menu spacing for PC and for mobile (I have accordion menu on mobile)? Also, for the accordion menu in my mobile and I want center the top-level menu items. How can this be done?

.sm-user-ui .yui3-menu-children {letter-spacing: 2px;}
.sm-user-ui .sm-nav-item-toplevel  {text-align: center }
.sm-user-ui .sm-accordion-children {text-align: left }

Hikin' Mike

@dipanjan94 said:
3. In my page https://www.dipanjanpal.com/Prints , due to some clumsy HTML/CSS coding, I have a widget with grey background where there is too much of space in my mobile. It looks perfect for PC though....I couldn't balance between the two, possibly because I picked up some lines randomly from the internet to try it out. Can anyone get it done in a cleaner way so that the spacing in mobile isn't too much (or something I can control using margin/padding etc?)

Please remove both HTML and CSS. Half of your code is so wrong and conflicting it hurts.

HTML

<div class="highlight-container">
  <p>All the prints in this website come with a <b>100% guarantee</b>. If you're ever unhappy with your prints or products, please contact me within 30 days of receiving your order</p>
</div>

CSS

.highlight-container {
  background: #e8e8e8;
  padding: 20px 10px;
  line-height: 1.5;
  font-size: 20px;
  color: #000;
  text-align: center;
}

@media (max-width: 736px) {

  .hightlight-container {
    padding: 10px 5px;
    font-size: 17px;
  }

}

dipanjan94

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
    padding-top: 10px;
}

Is there something I can tweak this code so that I don't have the blank space? I'm not worried about the content block at all, I just don't want a white padding. I want it transparent.

For the rest of it, thank you so much, all your solutions worked seamlessly as usual.

Please remove both HTML and CSS. Half of your code is so wrong and conflicting it hurts.

Also, sorry for this one haha. I just try to build my content blocks based on how I've seen you build other content blocks of my site and that's where I end up getting messy. I'll try to code in a cleaner way, thank you for all your help!

Hikin' Mike

@dipanjan94 said:
Is there something I can tweak this code so that I don't have the blank space? I'm not worried about the content block at all, I just don't want a white padding. I want it transparent.

Just remove it. Not sure why you had it on the to begin with.

Also, sorry for this one haha. I just try to build my content blocks based on how I've seen you build other content blocks of my site and that's where I end up getting messy. I'll try to code in a cleaner way, thank you for all your help!

It's all good. You have to start some place.

dipanjan94

Just remove it. Not sure why you had it on the to begin with.

When someone hovers on the top-level menu, I wanted a little gap between the top-level menu and the sub-menu boxes. The padding of 10px is ideal for other pages, but doesn't look good on the Homepage and Blog.

Is there anyway to have a transparent padding for these two pages? If not, I'd like to remove the padding for these two pages only, but not the others.

Hikin' Mike

@dipanjan94 said:

Just remove it. Not sure why you had it on the to begin with.

When someone hovers on the top-level menu, I wanted a little gap between the top-level menu and the sub-menu boxes. The padding of 10px is ideal for other pages, but doesn't look good on the Homepage and Blog.

Is there anyway to have a transparent padding for these two pages? If not, I'd like to remove the padding for these two pages only, but not the others.

That was a tough one to find. It's because of this as I mentioned earlier:

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
  padding-top: 10px;
}

I have that in one of my tutorials. I don't see that "white space" because I didn't set a page background in my theme, but you set it as white. So if you just add a background-color: transparent: here, that should fix that. I'll also add that in my tutorial.

.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu {
  padding-top: 10px;
  background-color: transparent;
}