{"action":"created","issue":{"url":"https://api.github.com/repos/TEAMMATES/repo/issues/3293","labels_url":"https://api.github.com/repos/TEAMMATES/repo/issues/3293/labels{/name}","comments_url":"https://api.github.com/repos/TEAMMATES/repo/issues/3293/comments","events_url":"https://api.github.com/repos/TEAMMATES/repo/issues/3293/events","html_url":"https://github.com/TEAMMATES/repo/issues/3293","id":67164079,"number":3293,"title":"Main Titles(h1 tags) are covered by navigation bar for a certain page width","user":{"login":"BillyZafack","id":9157836,"avatar_url":"https://avatars.githubusercontent.com/u/9157836?v=3","gravatar_id":"","url":"https://api.github.com/users/BillyZafack","html_url":"https://github.com/BillyZafack","followers_url":"https://api.github.com/users/BillyZafack/followers","following_url":"https://api.github.com/users/BillyZafack/following{/other_user}","gists_url":"https://api.github.com/users/BillyZafack/gists{/gist_id}","starred_url":"https://api.github.com/users/BillyZafack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BillyZafack/subscriptions","organizations_url":"https://api.github.com/users/BillyZafack/orgs","repos_url":"https://api.github.com/users/BillyZafack/repos","events_url":"https://api.github.com/users/BillyZafack/events{/privacy}","received_events_url":"https://api.github.com/users/BillyZafack/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/TEAMMATES/repo/labels/a-Usability","name":"a-Usability","color":"E6CCFF"},{"url":"https://api.github.com/repos/TEAMMATES/repo/labels/p.Medium","name":"p.Medium","color":"e19393"},{"url":"https://api.github.com/repos/TEAMMATES/repo/labels/s.Accepted","name":"s.Accepted","color":"B3E6B3"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-04-08T16:09:35Z","updated_at":"2015-04-10T05:28:36Z","closed_at":null,"body":"The titles(h1 header) of all the pages on the instructor's page(Home, Courses, Sessions, Students, comments, search and help) are covered up by the navigation bar when the pages width is less than 992px(responsiveness fault)."},"comment":{"url":"https://api.github.com/repos/TEAMMATES/repo/issues/comments/91435046","html_url":"https://github.com/TEAMMATES/repo/issues/3293#issuecomment-91435046","issue_url":"https://api.github.com/repos/TEAMMATES/repo/issues/3293","id":91435046,"user":{"login":"acruis","id":8437638,"avatar_url":"https://avatars.githubusercontent.com/u/8437638?v=3","gravatar_id":"","url":"https://api.github.com/users/acruis","html_url":"https://github.com/acruis","followers_url":"https://api.github.com/users/acruis/followers","following_url":"https://api.github.com/users/acruis/following{/other_user}","gists_url":"https://api.github.com/users/acruis/gists{/gist_id}","starred_url":"https://api.github.com/users/acruis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acruis/subscriptions","organizations_url":"https://api.github.com/users/acruis/orgs","repos_url":"https://api.github.com/users/acruis/repos","events_url":"https://api.github.com/users/acruis/events{/privacy}","received_events_url":"https://api.github.com/users/acruis/received_events","type":"User","site_admin":false},"created_at":"2015-04-10T05:28:36Z","updated_at":"2015-04-10T05:28:36Z","body":"768px is when the navbar will turn into a hamburger menu, so the question is what to do between the 768px and 992px area.\r\n\r\nThere are multiple ways we can approach this when window size is between 768px and 992px:\r\n\r\n* **Ugly 1:** Decrease font size\r\n![font size decrease](https://cloud.githubusercontent.com/assets/8437638/7082206/a2f3952c-df82-11e4-9b2d-459f83355927.png)\r\n* **Ugly 2:** Just add more padding to the body\r\n![add more body padding](https://cloud.githubusercontent.com/assets/8437638/7082270/d8d9b7c4-df83-11e4-9ddf-2f73392d9849.png)\r\n* **Decent 1:** Morph into hamburger menu immediately when window size is below 992px\r\n![without class change](https://cloud.githubusercontent.com/assets/8437638/7082278/fad914b4-df83-11e4-8a21-daa1eaaad8cf.png)\r\n* **Decent 2:** Morph into hamburger menu, and change the behaviour of container to mimic container-fluid (auto width instead of fixed width) (which is being done by Bootstrap at <768px screen sizes anyway)\r\n* **Doesn't work:** Change behaviour of container to mimic container-fluid but don't morph into hamburger menu\r\n![image](https://cloud.githubusercontent.com/assets/8437638/7082344/31b1153a-df85-11e4-9077-fe710ae0016b.png)\r\nOnly works for widths between 907px and 992px. Between 768px and 907px, same problem applies:\r\n![image](https://cloud.githubusercontent.com/assets/8437638/7082348/561dca76-df85-11e4-819e-c0be199131f6.png)\r\n\r\nI am implementing Decent 2 for now, but if another design is preferred, please do tell me too."}}