The CSS3 properties controlling my following element will remain fixed after reaching a specific threshold

After successfully creating my personal portfolio website, I've hit a roadblock when it comes to styling beyond the portfolio grid. Despite my best efforts, progress has been slow and frustrating.

Realizing that someone with more expertise could quickly identify what I'm missing, I decided to reach out for help.

If you have a moment, please check out the live website here:

Below is the CSS/HTML code snippet:

body {
   margin: 0;
   padding: 0;
 }

body, html {
  margin: 0;
  font: 1em "Open Sans", Sans-serif;
}

.nav-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  background-color: #222;
  height: 5em;
  color: #fff;
}
(remaining CSS/HTML code goes here...)

I would greatly appreciate any assistance or advice on how to make the contact section of the website less limited, so I can incorporate a contact form and footer effectively.

Thank you in advance!

htmlcsspositionelementportfolio

Answer №1

Take a look at this,

You seem to have missed the "." in some classes like parent; it should be .parent. I made a few styling changes just for demonstration purposes, feel free to modify them as needed. 

body {
   margin: 0;
   padding: 0;
 }

body, html {
  margin: 0;
  font: 1em "Open Sans", Sans-serif;
}

.nav-main {
  position: fixed;
  z-index: 9999;
  width: 100%;
  background-color: #222;
  height: 5em;
  color: #fff;
}

.nav-main .logo {
  float: left;
  font-weight: bolder;
  height: 40px;
  padding: 15px 30px;
  font-size: 3.0em;
  line-height:35px
}

.under-logo {
  font-size: 1em;
  color: #fff;
  float: left;
  margin-top: 45px;
  margin-left: 55px;
  line-height:40px;
  position: absolute;
}

.nav-main > ul {
  margin: 0;
  padding: 0;
  float: right;
  font-size: 3em;
  font-weight: bold;
  list-style-type: none;
  padding-right: 30px;
}

.nav-main > ul > li {
  float: left;
}

.nav-item {
  display: inline-block;
  padding: 15px 20px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}

.nav-item:hover {
  background-color: #444;
}

.title {
  height: 50em;
  position: relative;
  text-align: center;
  color: #fff;
  font-family: Open sans, Tahoma, Arial;
  background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
  /*background-color: #ee712b;*/
  background-size: cover;
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  overflow: visible;

...

       </div>

</body>


</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a customized navigation menu with both dropdown and dropup options

Is it feasible to create a hover effect that displays both an up and down menu simultaneously? I've tried positioning the up menu absolutely, but it doesn't seem sufficient to me. I want a dual menu setup where the up and down menus display next ...

htmlcssdrop-down-menumenu

Creating a sleek border around your list items to resemble a stylish price tag

Is it possible to create custom borders around list items with a unique border on the left side of each item? For example, see this image: I have tried using CSS 3 angles but I can't seem to achieve an inner circle or hole effect with borders. It ap ...

htmlcssstyleshtml-lists

Is there a way to set a background image in a section without being affected

I'm struggling to make my background image for the first section of my website touch the navigation bar. The theme of the design requires that the arm in the background image reach all the way up to the nav bar. Check out the background image here ...

cssbackground-imagenavbarpadding

The list countdown for loop only appears in the initial iteration

Hey there, I'm currently facing an issue with duplicating my JavaScript countdowns and displaying images of cards on each loop iteration. Strangely, the countdown only appears in the first instance even though it's within the loop. I'm seeki ...

javascripthtmlcss

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

Setting up JSP on a J2EE server using Eclipse

I'm encountering a specific issue with my setup. I am attempting to run JSP on a J2EE preview server within a Dynamic Web Project in Eclipse. While I know that it is possible to make it work by converting to a Maven project, adding dependencies, or us ...

htmleclipsemavenjspjakarta-ee

No output is displayed in the absence of errors. The program is functioning correctly

app.js angular.module('app', ['ionic', 'ui.router']) .config(('$urlRouterProvider', '$stateProvider', function($urlRouterProvider,$stateProvider){ $urlRouterProvider.otherwise('/'); $sta ...

javascripthtmlangularjsnode.jsionic-framework

WordPress - Unique custom fields & Identification Classes

Can anyone provide guidance on how to assign a class to custom fields in Wordpress? I want to apply custom CSS to multiple custom fields but am struggling to give them individual classes. ...

csswordpresscontent-management-systemfield

What is the significance of the border classes having an overriding color property in Bootstrap?

When adding a border to my navigation menu, I initially thought using the Bootstrap .border class would be the best approach. However, upon examining the code generated by this class, I noticed that it uses an !important declaration on the color property ...

htmlcsstwitter-bootstrapbootstrap-4

What is the reason behind the necessity of having content inside div tags in order for the style to take effect

Upon analyzing the code provided, it was observed that if there is no content inserted between the tags as shown in <div id="header"></div, the corresponding style does not get applied. Is it mandatory to always have content placed between the t ...

cssxhtml

Updating the DOM through Long Polling allows us to maintain existing attributes in jQuery Plugin

UPDATE: The functionality is all set; the pushes are working. The only issue I'm facing is that each push resets the #load_info div to empty. Is there a way to retain the original content inside the div, even though the content will be an updated vers ...

javascriptphpjqueryhtmljson

Retrieve data from the server as effortlessly as accessing an <img> tag

Retrieving data from a server (potentially on another domain) is straightforward when it comes to images: <img src="http://www.example.com/test.jpg" /> This process does not result in any CrossOrigin issues. However, when attempting to fetch text ...

htmlajaximagexmlhttprequestcross-domain

Challenge encountered when trying to add overlay hover effect on image cards

Yesterday I faced a challenge with a tracking problem while trying to implement code on a w3schools webpage. The issue was with a hover effect triggering an overlay when the mouse was placed anywhere on the line, rather than just within the card area. I&ap ...

htmlcssbootstrap-4

Modify the div height to match the parent div's height

I'm currently working on customizing a navigation panel, and I'm looking to align the styles of the various options with the parent div. One specific adjustment I need to make is setting the background color of the options to match the parent div ...

htmlcsstwitter-bootstrap

Is there an alternative solution to the issue of the jQuery resize() event not triggering when an input is

Despite the fact that the jQuery event resize() should trigger when the width of an input box changes, it seems to be malfunctioning. As per the jQuery API documentation, the resize event is supposed to go to the (window) handler. So my query here is, what ...

javascriptjqueryhtmlajax

Navigation bar with a full-page slider

I am trying to incorporate my bootstrap nav bar into a full-width slider, similar to the layout in this example. https://i.sstatic.net/LE9wP.jpg This is the full width slider http://codepen.io/grovesdm/pen/MazqzQ Currently, I have positioned the nav ba ...

javascriptjqueryhtmlcsstwitter-bootstrap

Excessive margin is preventing the navigation from being properly displayed

I am experiencing an issue with my sticky navigation bar that is enclosed in a div with 40px of margin on each side. The fixed navbar has a width of 100%, and while it correctly considers the parent's margin on the left side, it overflows on the right ...

htmlcss

Ways to ensure that both the Search text field and search button are of equal height

I am facing an issue with the layout of my HTML code within my ASP.NET MVC web application. Below is the snippet of code causing the problem: <form class="customSearch" method="GET" action="@Url.Action("Search", "Home")"> <input class="searchIn ...

csshtml

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

<H2> along with <Sup>

So I have an H2 heading with a company name and next to that on the same line, we need to include a Superscript tag (TM). Here is the code: <h1 class="Red">Company Name</h1><sup>&#8482;</sup> When rendered, it looks like this: ...

htmlcsstags