CODEWITHSUNDEEP
css
focus
focus

Reputation: 11

Issue with dropdown overlay using CSS

I am unable to fix the following issues:

  1. Notice the drop down menus 'Company branches' & 'Fields of Business', when expanded, it gets hidden behind the lower section. What I wish for is to bring it to the top.

  2. When viewed on mobile, the header logo + text is not fitting in and the logo is going out of the view. What's the best way to fix it?

Thanks.

Upvotes: 1

Views: 320

Answers (2)

Type-Style
Type-Style

Reputation: 1831

1: The first issue with the hidden select field can be handled via z-index. Or switching the DOM Order. But in this case it might be easier to include a simple z-index on the fields.

.form-group.location-form {
    position: relative;
    z-index: 1;
}

This does the job ... well kinda. The field is larger than its container, and somewhere up the DOM-Tree overflow hidden is specified. On the .hero-header to be exact. I don't know why it's needed. But I suggest removing it. (style.css:1560)

2: The Headline Logo issue is caused by position: absolute in combination with bottom: 0; It looks like that this is not really needed. Changing it to position: relative; does the trick. This way, the element can grow, when the text in the headline needs more height, without overlapping other elements.

.main-header .hero-header .inner-hero-header {
    position: relative;
    width: 100%;
    z-index: 9;
}

Btw: the bottom and left values can be omitted here.

Upvotes: 0

Muralitharan V
Muralitharan V

Reputation: 127

For 2nd Issue use this

.main-header .hero-header .inner-hero-header {
position: relative;
width: 100%;
left: 0;
z-index: 10;
bottom: 0;
}

.inner-hero-header class position is 'absolute' so, you change the position as 'relative'

Upvotes: 1

Related Questions