Hello guys and girls,
I've been given my first WordPress build at work, with freedom on pretty much anything. I chose to use Altitude pro as a theme with Genesis as a framework.
I love the theme but, for a service page the theme is not exactly fantastic. To spice it up a bit, I'd like to create a custom header design for every service page on the site.
This would be a coloured background over the top 1000px of the page or so, that has a solid colour with some patterns on top.
Due to my inexperience though, I'm not really sure on how to do it and my PHP knowledge is not fantastic.
Could anyone please assist?
Thanks!
You can check here for normal headers or even fixed headers. They explain well. http://www.w3schools.com/css/css_navbar.asp
Here is a code that makes a fixed header with menus. If you don't want to make it fixed you can just delete "position: fixed;".
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
</div>
</body>
</html>
Related
I've ran into a problem using a custom WordPress menu that I can't seem to solve, so after doing a lot of searching the web & failing to fix this over the past few days, I've decided to see if anybody here on StackOverflow can help.
Please note: I would use a Walker function for this but I'm too far gone with the code right now and the way the design works I'm having to build the menu this way.
My snippet for my dropdown: http://pastebin.com/8Stfs90c (would post but it would crucify the screen).
I’m having trouble with the 3rd level of my dropdown menu. In this image: http://s13.postimg.org/lxhslt0lz/image.png you can see that there’s a <li></li> that I’ve highlighted (Pages, About Me, About Us). The structure is as follows
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
And these are fine, BUT when it goes to the third dropdown, it cuts of the <li> and leaves the rest of the Pages children and puts them into a separate container and not the <li> for Pages.
So it should work like so:
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
Right Sidebar (Parent: Pages)
Left Sidebar (Parent: Pages)
Our Process (Parent: Pages)
And all though it may look like this on the dropdown (visually), as you can see in the code it isn’t represented by this. I think the problem I’m having is the checks I’m doing for closing the </li> is wrong. I’ve had this problem for a few days and I just can't seem to fix it. I was going to post this on the WordPress based forum but it's more of a PHP error than anything else.
Here’s a quick screenshot of me hovering over the elements that should be in Pages: http://s23.postimg.org/ef4ame6m3/image.png - as you see they’re separated from the <li>.
To replicate this what I've done is just created a menu structure in WordPress and used the code that's in the snippet (basically I just pasted it into the index.php file) to show how it's being represented.
I really hope somebody can help with this as it has been driving me mad and put a holt on my project for the past few days.
Apologies for the links above, I would post them directly in (screenshots & code) but I didn't want to take away from the actual problem.
If somebody does manage to provide me with the solution I'd be more than happy to buy you a virtual coffee or two!
Out of curiosity, I could be missing the point, is there a reason why would not want to use wp_nav_menu() to handle all of this?
Ex below would output the correct structure for you to theme as your screenshot if applied in your context?
wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );
Thanks.
Had a quick look at the code, I suppose line 100-130 are dealing with the third dropdown. Actually whats happening is you already have an ol on line 105, then its again being called through the loop on line 122.
echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";
I think the problem is on line 128 you have to remove ol from the end and create a new condition just for this.
Sorry if i am not being of any help but its really hard to picture the whole code in mind without seeing it. If you are really stuck send the ftp details in chat and i can have a look.
Hi There try this css code to create multiple Nested menu create.
WP code for menu in header.php
<nav class="photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>
CSS Code Add in your style.
.photoshoot-menu {
float: right;
width: auto;
padding-left: 0px;
padding-right: 0px;
}
.photoshoot-menu ul {
padding-left: 0px;
margin: 0px;
}
.photoshoot-menu > ul li {
display: inline-block;
position: relative;
text-transform: uppercase;
margin: 3px 2px;
position: relative;
}
.photoshoot-menu > ul > li > a {
color: #212121;
display: inline-block;
padding: 8px 20px;
border: 1px solid #4f4f4f;
border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
background-color: #343434;
color: #f45c06;
}
.photoshoot-menu ul ul {
border-radius: 4px;
border: 1px solid #4f4f4f;
background-color: rgba(38, 38, 38, 0.95);
opacity: 0;
position: absolute;
top: 42px;
width: 100%;
min-width: 170px;
z-index: 1;
visibility: hidden;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.photoshoot-menu ul ul li {
width: 100%;
}
.photoshoot-menu ul ul li a {
display: inline-block;
line-height: 16px;
padding: 5px;
color: #FFF;
width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
color: #f45c06;
}
.photoshoot-menu ul ul ul {
left: 99%;
top: 0px;
}
<nav class="photoshoot-menu">
<ul class="menu" id="menu-all-pages">
<li>Home
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3
<ul>
<li>Lorem Ipsum
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample Page
</li>
</ul>
</nav>
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
I have a question regarding CSS and how to bequeath background information within an unordered list.
I have a footer in that I would like to show different flags. there I have a footer class
<ul class="flag">
<li id="de"></li>
</ul>
.flag consists of:
.footer #legals #list2 .flag{
width: 20px;
height: 10px;
display: inline-block;
float:left;
margin-top: 16px;
margin-left: 15px;
background-image:url(../images/flags.png);
}
.footer #legals #list2 .flag #de{
background-position: -40px;
}
.footer #legals #list2 .flag #en{
background-position: -20px;
}
.footer #legals #list2 .flag #en_us{
background-position: -20px;
}
So I thought it would be easier for each flag just to change the entry background-position.
But for some reason this is not working and I dont know why? I also tried to use instead of li id div id but it is still the same.
If there is someone who could help me out I really would appreciate it.
The background-image is set on the <ul> instead of the <li>. If you change that first selector from
.footer #legals #list2 .flag
to
.footer #legals #list2 .flag li
then the <li> will actually have a background-image to position.
I've built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I'm using a PHP include for the separate header & footer PHP files. I've linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is "bleeding through" to both the header and footer PHP files.
For instance, I'll apply a dark gray to my body text & links to my footer.css file:
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->
#footer { width: 100%; height: 20%; background: #181818 ; }
//footer-nav style
#footer-nav {
list-style-type: none;
padding: 0;
float: center;
}
#footer-nav li {
display: inline;
}
#footer-nav li a {
float: center;
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}
</style>
`
This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn't be happening as I'm linking header.php to it's own header.css file).
What I'm essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.
If there is a more efficient way of doing this please let me know!
Technically, should only belong in the of your page, not in inline blocks (though it does work).
You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.
Right now you are just styling top-level elements and the last to load is taking effect.
You could try putting something like this on the background of the particular css.
Ex.
background: #181818 !important;
Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely.
I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code.
I've checked for any weird characters causing problems in other text editors and can't find anything.
Here's the code...
Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line):
<ul id="menu">
<li>About</li>
<li class="active">Track List</li>
<li>Stats</li>
<li>Stats</li>
</ul>
Produces:
Like this the menu looks wrong but code looks fine:
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
Produces:
wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png
I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me?
Sorry for the lengthy post (my first on stackoverflow).
Edit - Full CSS and HTML:
body {
/* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
font-family: 'Trebuchet MS', Helvetica, sans-serif;
/* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}
a {
color: #FFFFFF;
text-decoration: none;
}
#container{
margin: 0 auto;
width: 800px;
}
#content {
margin-top: 50px;
}
#header {
background-image: url("../images/absolute_radio_logo.png");
border-bottom: solid 1px #777777;
background-repeat: no-repeat;
width: 800px;
height: 86px;
padding-bottom: 15px;
}
#menu {
float: right;
}
#menu li {
display: inline;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Radio - Statistics</title>
<link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>
About
</li>
<li class="active">
Track List
</li>
<li>
Stats
</li>
<li>
Stats
</li>
</ul>
</div>
<div id="content">
<!-- content -->
Elapsed Time: 0.0033 - Memory Used: 0.4MB
</div>
</div>
</body>
</html>
It seems to be totally fine with the CSS you supplied, so I'm guessing there must be some other rule affecting your links. Could you please supply us with a live preview or the full stylesheet?
Edit:
Seems to be an issue with how "display: inline" collapses the elements contents, though I couldn't find any proof of that. Change
#menu li {
display: inline;
}
to
#menu li {
display: inline-block;
}
or add a margin to it:
#menu li {
display: inline;
margin-right: 5px;
}
To fix the alignment of the text, I'll go ahead and recommend you float the lis. Someone please correct me if this is a horrible idea. Add
#menu {
overflow: hidden;
}
#menu li {
float: left;
}
to your existing rules.
Just as a guess try setting the line-height for the li & a tags to 1em or even 0
#menu li, #menu a {
line-height: 1em;
}
Firstly, those two screenshots appear to be swapped around, the first has gaps between the links, caused by the white-space in the second code snippet.
This new white-space-collapse property may be able to help.
#menu li{white-space-collapse:discard}
via: http://safalra.com/web-design/html-and-css/white-space-property/
If that doesn't work, the next option is to set the <a> tags to block level elements and the <li> tags to inline.
#menu li{display:inline}
#menu li a{
display:inline-block
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li a:hover{
border-bottom: solid 3px #FF0000;
}
#menu li.active a {
background-color: #58065e;
}
so it seems the targeted answer's have all been provided, so I'd just like to add that as a rule of thumb I always use normalize.css which is a css library that ensures normal
you can download it or use npm install normalize.css
You must set overflow: hidden on the parent box, then set position: relative on the <li>:
ul {
margin: 0;
display: flex;
flex-wrap: wrap;
padding: 25px;
margin: 5px 0;
overflow: hidden
}
ul li {
display: inline-block;
padding: 19px 10px;
text-align: center;
position: relative
}
ul li::before {
content: '';
position: absolute;
width: 400%;
height: 1px;
background: #f3f3f3;
bottom: 0;
right: -250px
}