Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Elements fall below the side nav menu rather than next to it

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #245860
    johned
    Participant

    I implemented a nav menu for mobile screens which works well. The problem is now all the other elements fall below the bottom of the side menu bar rather than placed next to it. How do I get the other elements at the top of the page rather than below it. I colored the problem area yellow (line 6 in the CSS so I realize this is the problem. I just dont know how top keep the mobile nav menu while also bringing the other elements to the top of the page. If I reduce the height of the yellow background (line 4) it caused the mobile nav bar menu to show up even when it is not clicked on but I cant see how else to bring the other elements to the top of the page without reducing the height on line 4 I have attached my code below http://codepen.io/Johned22/pen/VKPvkx Thanks in advance

    #245862
    Beverleyh
    Participant

    Sorry, there’s no menu in the linked pen. Have you linked to the right one?

    #245863
    johned
    Participant

    Sorry I attached the wrong link. This is the correct link
    http://codepen.io/Johned22/pen/RGppPm/

    #245872
    Beverleyh
    Participant

    What you’re describing in your first post isn’t demonstrated in the pen. Looks like you’ve forgotten the CSS for the menu, and the :checked state.

    #245882
    johned
    Participant

    Sorry I am having a hard time explaining what I mean so I have attached a bit more of the code (sorry I have put so much in the codepen).
    As you can see when you when you shrink the page down to 600px it turns into the mobile version with a drop down menu tab for the different pages. The problem is when I do this the other elements for the page sits below the bottom of the drop down menu not at the top of the page. The desktop version is fine the way it is but I dont know how to make all the elements sit at the top of the page. As you can see the text and images sits below the yellow box not at the top of the page. If I remove the yellow box it also uncovers the drop down menu for the mobile screen so I cannot remove that part.
    I have tried placing the info between the site-wrap in the HTML but that just makes all the text clickable and it also affects the desktop version which I dont want it to do.
    Where am I going wrong?
    I have attached the code below
    http://codepen.io/Johned22/pen/RGppPm/
    Thanks in advance

    #245885
    Beverleyh
    Participant

    I still don’t understand what it is you’re doing – the demo and (my understanding of) what you’re describing don’t seem to tally.

    Are you trying to make a checkbox activated off-canvas mobile menu that transforms into a horizontal menu bar on desktop? If so, feel free to examine this and adapt to your needs. Good luck with your project http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm

    #245886
    johned
    Participant

    Thanks for your response. No I am not trying to make a check box. If you scroll down bellow the yellow box there is all the text on the right side of the page. I want to have the text at the top of the page. Right now it only falls below the yellow box and cant figure out what I am doing wrong.

    #245887
    Beverleyh
    Participant

    I didn’t ask if you were trying to make a checkbox. I asked if you were trying to make an off-canvas menu on mobile (one which happens to be activated by a checkbox, as per your markup) that transforms into a horizontal menu bar on desktop. If that is your goal, take a look at the example I linked to. It demonstrates what I think you’re describing – a menu that doesn’t interfere with the content (content stays at the top of the page). I think you’ll have a better time of reverse engineering a working example (if it does roughly what you want) than hoping somebody else can make sense of your description and demo.

    Good luck.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.