title: I Need Help Making a Couple Elements More Responsive to the Viewport on my Website. (CSS)
body: <p>I am in the process of making a website using Wordpress and I am almost done messing around with the additional CSS, I just need help tweaking a couple elements...</p>
  <p>My website started out as a template that I bought, and I've just added a significant amount of additional CSS to the template in order to customize it as I see fit. I have no prior coding knowledge and have had to learn CSS on the fly for this.</p>
  <p>Since the website I am creating began as a Wordpress template and not from scratch, I am unsure of where to find the appropriate coding to support my questions since the website code is all over the place and cannot all be accessed cleanly in one way, if that makes sense.</p>
  <p><strong>Because of that, I screen recorded a video for reference instead: <a href="https://vimeo.com/636885532" rel="nofollow noreferrer">https://vimeo.com/636885532</a> . Please use this video for reference to the questions I will ask shortly.</strong></p>
  <p>I hope this will suffice instead of the supplementing code. If it isn't, I can try my best to find it.</p>
  <p>I need help with the following:</p>
  <p>(1) (Video reference from 00:00 - 00:30): Until it becomes a burger menu, I need the top menu to stop changing based on the viewport width. As can be seen from my video, when I decrease the width of the browser, the top menu starts to stack on itself so it can fit on the screen, until it eventually becomes a burger menu (This was pre-coded with the template).</p>
  <p>**What I want is for the menu to stay as it is when the website is first loaded and NOT stack (rather let it slide off the screen) when the browser width is decreased, and then continue on to become a burger menu whenever the pre-coded template says. I do not want to mess with the code that makes the menu become a burger at a certain width or whatever, but rather keep it simple and make the menu SLIDE off the screen until that happens. I basically need to make the menu LESS responsive. I want to make the menu STOP trying to fit on the screen and stacking when the browser width is decreased until it becomes a burger. (<strong>The element name is .main-navigation</strong>). Also this is for desktop only if that makes a difference in your guys responses, I have already dealt with mobile/iPad, etc. and that goes for the following question as well.</p>
  <p>(2) (Video reference from 00:30 - end): This second question is very similar to the first. I need the title and its tagline to stop being responsive to the viewport HEIGHT entirely. <strong>ONLY THE HEIGHT</strong>, I have dealt with the width responsiveness for these elements already.</p>
  <p>As can be seen from the video, when I shrink the page only vertically, 3 elements are responsive: the header (logo and top menu),the title, &amp; the tagline. <strong>I want to keep the header as it is</strong>, with it keeping to the top of the viewport when the height is changed, but I want to <strong>stop</strong> the title and tagline from being responsive to the height. <strong>I need the title&amp;tagline to stay where they are when the website is first loaded and stop moving with the browser height, so it can just slide off the screen when the height is decreased</strong>. (<strong>Element name for title is: #header-page-title .entry-title) (Element name for tagline is #header-page-title .description)</strong></p>
  <p>Hugeeee thank you to anyone that can offer help. This is my first time asking a question on here and I have no clue if I am going about it properly lol. If requested I can try to get specific information/code for you guys in order to get better/more specific help. I included element names but I am not sure if that is sufficient enough for those (if any) of you who are kind enough to try and help by writing specific coding for me. For any suggested code I will have to put it into the additional CSS section in my site editor in Wordpress. Again thank you to everyone that tries to help.</p>
  <p><strong>TL;DR: Watch the video I linked the 4th paragraph. I need the top menu to stop stacking when the width is decreased and rather just slide off the screen, but still let it become a burger menu when it does. I also need the title and tagline to stop being responsive to the viewport height entirely (stop moving with the browser height).</strong></p>