0

I am designing a web page with a little toggle menu icon for navigation purposes.

My problem is that whenever the window is resized under the width of the main container (.story, which only has max-width defined), the menu icon overlaps the content.

Instead, I would like the icon to block on the right border of my container.

currently, the code for positionning my nav icon:

nav {
    position: fixed;
    top: 100px;
    right: 100px;
}

and the container:

.story {
    padding-top: 50px;
    margin: 0 auto;
    height: 1000px;
    max-width: 1000px;
    text-align: justify;
}

Here is a jsfiddle to illustrate my problem. and here is an example of a website where they made it work

Thanks for taking a look at it.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Ordinaly
  • 69
  • 1
  • 9
  • does it need to be the same distance from the edge of the screen (100px) no matter how wide the screen gets? – jmore009 Sep 09 '14 at 14:55
  • 1
    Because you have position fixed, it is outside the main flow of the page, so it'll overlap the content block based on the window resize. Setting the nav position to `absolute` will fix that. – Brian Sep 09 '14 at 14:56
  • @jmore009 No, this is not necessary. – Ordinaly Sep 09 '14 at 15:00
  • @BrianBenett I understand this, but I need the icon to be fixed because it has to remain accessible throughout the whole page (It is a fullpage website) Here is an example of a website that has this system working: http://www.hochburg.net/de/ – Ordinaly Sep 09 '14 at 15:03
  • are you sure that the [website](http://www.hochburg.net/de/) you're pointing to has the same system with what you're looking for `(position: fixed)` even on the small screen? have you tested it on the small screen yet for that [website](http://www.hochburg.net/de/), because what happened when I try is that the `style` changed from `position: fixed;` to `position:absolute!important;` using the `CSS Media Query` – Kyojimaru Sep 10 '14 at 09:40
  • @Kyojimaru You are right, I think using a media query when the icon comes close to the border of the container is the best way to handle this. I cannot think any other way around. – Ordinaly Sep 10 '14 at 13:03

1 Answers1

0

Per my understanding, position:fixed will overlap data.

A simple way can be reducing width of story div.

nav css

nav { position: fixed; top: 20px; right: 20px; }

story css

.story { padding: 50px 0; margin: 0 auto; height: 1000px; max-width: 400px; text-align: justify;}

Rajesh
  • 24,354
  • 5
  • 48
  • 79
  • Thank you for your answer, unfortunately, I need my container to be 1080px large one the bigger screens, thus max-width is bound to this value. – Ordinaly Sep 10 '14 at 13:04
  • If you want full width container, then what you can try is to have a NAV bar on top that can hold stuff like Brand name, menu and search bar and fix that NAV on top. OR you can take create a div with fixed height and then put you story div inside that div. So you will have scroll of div and of page. – Rajesh Sep 11 '14 at 07:55