My problem is, that my mobile navbar dont work and i cant figure out why.
I searched up on much websites but cant find anything what i did wrong.
Of course i changed this but i still dont know what and my mobile navbar dont show up:
Image: https://prnt.sc/BH-gA0TxumST
Here you can see, that the menu is almost there but when i click, nothing happens.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Astra | Discord bot</title>
<meta content="" name="description">
<meta content="" name="keywords">
<meta property="og:title" content="Astra ยท Discord Bot" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/assets/img/favicon.png" />
<meta property="og:description"
content="Astra manages your server - you can handle your discord server with Astra: Administration, level system, temp channels, welcome message, and much more." />
<meta name="theme-color" content="#5846f9">
<link href="assets/img/favicon_transparent.png" rel="icon">
<link href="assets/img/favicon_transparent.png" rel="favicon_transparent">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body>
<?php
include_once 'templates/header.php';
?>
header.php
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center justify-content-between">
<img src="../assets/img/Astra_Stern.png" alt="" >
<nav id="navbar" class="navbar">
<ul >
<li><a class="nav-link scrollto active" href="https://astra-bot.de/#hero">Home</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#about">About</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#team">Team</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#features">Features</a></li>
<li><a class="nav-link scrollto" href="https://astra-bot.de/#faq">FAQ</a></li>
<li><a class="file" href="commands">Commands</a></li>
<li><a class="getstarted" href="./invite.php">Invite</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</div>
</header>
css
/**
* Template Name: Techie - v4.3.0
* Template URL: https://bootstrapmade.com/techie-free-skin-bootstrap-3/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
a {
color: #5846f9;
text-decoration: none;
}
a:hover {
color: #8577fb;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #5846f9;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #7b27d8;
color: #fff;
}
.circular--square {
border-radius: 50%;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: #373131;
}
::-webkit-scrollbar-thumb {
background-color: #5846f9;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #686868;
}
::selection {
color: #5846f9;
background-color: #69c1e4;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #36393e;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #5846f9;
border-top-color: #e7e4fe;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
#-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
#media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
}
#header.header-scrolled, #header.header-inner-pages {
background: rgba(24, 6, 185, 0.8);
padding: 12px 0;
}
#header .logo {
font-size: 32px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
#header .logo a {
color: #fff;
}
#header .logo img {
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar > ul > li {
padding: 10px 0 10px 24px;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3px;
font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
transition: 0.3s;
position: relative;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar > ul > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
visibility: visible;
width: 100%;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #fff;
}
.navbar .getstarted {
padding: 8px 25px;
margin-left: 30px;
border-radius: 5px;
color: #fff;
transition: 0.3s;
font-size: 14px;
font-weight: 600;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.navbar .getstarted:hover {
color: #fff;
border-color: #fff;
}
.navbar .getstarted:before, .navbar li:hover > .getstarted:before {
visibility: hidden;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 24px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 14px;
color: #2c4964;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
color: #5846f9;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
#media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(28, 47, 65, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile > ul > li {
padding: 0;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #2c4964;
}
.navbar-mobile a:hover:before, .navbar-mobile li:hover > a:before, .navbar-mobile .active:before {
visibility: hidden;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #5846f9;
}
.navbar-mobile .getstarted {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
color: #5846f9;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
it would be nice if someone can have a look at it and tell me what i did wrong :/
You need to make this site responsive. check this question. Otherwise, if you are using bootstrap, you need to import the bootstrap CSS file. Add this line to the head of the HTML.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
visit bootstrap for many details. This code will help you to get bootstrap 4.0
If you are using different classes which does not have a bootstrap class, you need to make them responsive manually. This is its basic structure of it. You need to customize all your elements to the appropriate sizes. For more details click here
#media only screen and (max-width:600px) {
h1, .h01 {
font-size: 2.6rem;
letter-spacing: -.07rem;
}
}
Related
I am trying to use the following header menu template across my website. unfortunately, the menu hides the top part of my page content. I am a newbie. Please help. I tried, removing z-index, adding bottom margin, noting works.
The header.php code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
<a href="" class="logo">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
class="logoimage"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li class="contactme">Contact Me</li>
<li class="aboutme">About Me</li>
<li class="projects">Projects</li>
<li class="Home">Home</li>
</ul>
</header>
<!-- partial -->
<style>
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fffceb;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background: rgb(255, 245, 246);
color: rgb(247, 133, 152);
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.logoimage{
width: 130px;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.Home{
order: 1;
}
.projects{
order: 2;
}
.aboutme{
order: 3;
}
.contactme{
order: 4;
}
}
#media only screen and (max-width: 600px) {
.menu{
display: flex;
flex-direction: column-reverse;
}
}
</style>
</body>
</html>
Then I have a index.php where I include this header.
The style related to my index.php is
body {
background-color: #f2f2f2;
}
.formular input:disabled {
background-color: #dddddd;
}
.hint {
color: grey;
}
.title {
font-weight: bold;
}
p.subtitle {
font-weight: bold;
}
.requiredSymbol {
color: red;
}
.formular input[readonly="readonly"] {
background-color: #dddddd;
}
form.formular,
.validationEngineContainer {
/*background-color: #FFFFFF;*/
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #a5a8b8;
width: 700px;
margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
padding: 15px;
border: 1px solid #b5b8c8;
border-radius: 5px;
}
Your header css should have a position:relative. And you can add some margin to add distance from whatever is in the body.
Example shown below:
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
position: relative;
width: 100%;
z-index: 3;
margin-bottom: 10px;
}
I'd like to create a dropdown menu from the profile section of the navbar. How can I do that?
I've tried looking it up but I didn't found any good sulotion that fits my ides. (I'd like this dropdown menu to contain 2 items.)
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
<div class="nav">
<ul>
<li>Main page</li>
<li>Servers</li>
<li>Rules</li>
<li>VIP</li>
<li>Contact</li>
<li>Profile</li>
</ul>
</div>
not that much stylish but like regular ones you see on other websites
also don't forget to run it on your own browser
try to make it responsive
you are using "px" that is not a good idea for declaring measures
try to use "vh" for height and "vw" for width
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
.dropdown {
position: absolute;
height: 0;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
width: 40vw;
top: 120px;
display: flex;
z-index: -1;
flex-direction: column;
right: 10%;
background-color: #454552;
}
.profile:hover .dropdown{
height: 10vh;
opacity: 1;
pointer-events: all;
top: 100px;
z-index: 1;
}
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="author" content="Farkas">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav">
<ul>
<li>Main page</li>
<li>Servers</li>
<li>Rules</li>
<li>VIP</li>
<li>Contact</li>
<li class="profile">Profile
<ul class="dropdown">
<li>item1</li>
<li>item2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I am trying to make the site title of my header clickable and link back to the home page. (For example, google.com - if you click the google logo you go back to the google homepage.) I have added all of the correct code to my header.php but it still won't allow me to click the site title. Does anyone see any errors or have any solutions? Thanks in advance.
my header.php
<?php
/**
*
*
*
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
<header id="ht-masthead" class="ht-site-header">
<div class="ht-container ht-clearfix">
<div id="ht-site-branding">
<?php
if ( function_exists( 'has_custom_logo' ) && has_custom_logo() ) :
the_custom_logo();
else :
if ( is_front_page() ) : ?>
<h1 class="ht-site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="ht-site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif; ?>
<p class="ht-site-description"><?php bloginfo( 'description' ); ?></p>
<?php endif; ?>
</div><!-- .site-branding -->
<nav id="ht-site-navigation" class="ht-main-navigation">
<div class="toggle-bar"><span></span></div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container_class' => 'ht-menu ht-clearfix' ,
'menu_class' => 'ht-clearfix',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
) );
?>
</nav><!-- #ht-site-navigation -->
</div>
</header><!-- #ht-masthead -->
<div id="ht-content" class="ht-site-content ht-clearfix">
my css
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#ht-masthead{
background: #FFF;
height: 70px;
border-bottom: 1px solid #eee;
z-index: 99;
transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
position: fixed;
text-align: center;
width: 0 auto;
margin-right: 38px;
width: 100%;
}
.ht-site-title{
font-family: 'futura_tbold';
font-size: 24px;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1;
margin-bottom: 8px;
margin-top:5px;
margin-left: 75px;
text-align: left;
float: left;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
}
.ht-site-title a{
text-decoration: none;
color: #000;
}
.ht-site-description{
color: #EEE;
margin: 0;
font-size: 15px;
font-style: italic;
line-height: 1;
}
.ht-site-description a{
color: #333;
}
/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
#ht-content {
padding-top: 200px;
}
.ht-section {
padding: 60px 0;
background: #FFF;
}
.ht-section-title-tagline {
margin-bottom: 60px;
text-align: center;
}
.ht-section-title {
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 36px;
width: 60%;
margin: 0 auto 15px;
}
.ht-section-title:last-child {
margin-bottom: 0;
}
.ht-section-tagline {
font-size: 20px;
width: 70%;
margin: 0 auto;
}
#ht-page {
width: 100% !important;
margin: 0 auto;
max-width: 100% !important;
overflow: hidden !important;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#ht-site-navigation {
position: absolute;
width: 100%;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
float: right;
}
.ht-sticky #ht-site-navigation {
padding: 17px 0;
}
.ht-main-navigation .ht-menu {}
.ht-main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
position: relative;
}
.ht-main-navigation li {
float: left;
margin-left: 30px;
}
.ht-main-navigation a {
display: block;
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 15px;
font-family: 'Raleway', sans-serif;
line-height: 36px;
padding: 0 15px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 40px;
}
.ht-main-navigation ul ul {
position: absolute;
left: 0;
top: 100%;
background: #FFF;
min-width: 200px;
right:0;
z-index: 999;
padding: 8px;
margin-top: -21px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
height:300px;
transform: scaleY(0);
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
opacity: 0;
}
.ht-sticky .ht-main-navigation ul ul {
margin-top: 17px;
}
.ht-main-navigation ul ul ul {
left: 100%;
top: 0;
margin: 0 0 0 8px;
border-top: 0;
}
.ht-sticky .ht-main-navigation ul ul ul {
margin-top: 0;
}
.ht-main-navigation ul ul a {
text-transform: uppercase;
font-weight: 400;
color: #444;
line-height: 1.5;
padding: 7px 25px;
font-size: 12px;
text-align: left;
}
.ht-main-navigation ul ul li:first-child {
padding-top: 15px;
}
.ht-main-navigation ul ul li {
float: none;
margin: 0 0 5px;
}
.ht-main-navigation ul ul li:last-child {
margin-bottom: 0;
}
.ht-main-navigation ul li:hover > ul {
opacity: 1;
transform: scaleY(1);
}
.page-template-home-template .ht-main-navigation .current_page_item > a,
.page-template-home-template .ht-main-navigation .current-menu-item > a,
.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
.home.blog .ht-main-navigation .current_page_item > a,
.home.blog .ht-main-navigation .current-menu-item > a,
.home.blog .ht-main-navigation .current_page_ancestor > a {
background: none;
color: inherit;
}
.ht-main-navigation li:hover > a,
.page-template-home-template .ht-main-navigation li:hover > a,
.home.blog .ht-main-navigation li:hover > a,
.ht-main-navigation .current_page_item > a,
.ht-main-navigation .current-menu-item > a,
.ht-main-navigation .current_page_ancestor > a,
.page-template-home-template .ht-main-navigation .current > a,
.home.blog .ht-main-navigation .current > a {
color: #000;
text-decoration: none;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 15px;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
I'm not sure if you mean clicking the title of the tab or making the header tag clickable.
If you mean making the header tag clickable, then try the following snippet:
header {
background-color: red;
height: 50px;
width: 100%;
cursor: pointer;
}
<header onclick="alert('Clicked')"></header>
If you want to make the title of tab clickable, you're out of luck.
It's impossible.
If you want a text link, use a href, if you want an image link, put img tag in a tag
* {
padding-bottom: 10px;
}
Google!
<a href="https://google.com">
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png">
</a>
Note: Links wont work in here because of the snippet thingy
I am trying to get the header of my site and the navigation on the same line. I want the header to be aligned left and the navigation to be centered. My code doesn't seem to be working, so I was wondering if anyone has any solutions? Thanks in advance.
an example of what I am trying to have it look like...
my header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!-- site-header -->
<header class="site-header">
<h1><?php bloginfo('name'); ?></h1>
<h5><?php bloginfo('description'); ?></h5>
<nav class="site-nav">
<?php
wp_nav_menu(array(
'menu' => 'Primary Menu Links',
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Walker()
));
?>
</nav>
</header>
</div>
my css
.site-header h1 {
margin: 0;
font-family: 'futura_tbold';
font-size: 24px;
text-align: left;
text-transform: uppercase;
letter-spacing: 6px;
padding-top: 20px;
position: fixed;
z-index: 10000;
}
/* Drop Down Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
}
#cssmenu {
height: 37px;
text-align: center;
margin-bottom:50px;
width: 0 auto;
margin-right:38px;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover
}
#cssmenu > ul {
}
#cssmenu > ul > li {
list-style: inside none;
position: relative;
display: inline-block;
}
#cssmenu > ul > li > a {
display: block;
position: relative;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
color: #2f3847;
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
}
#cssmenu > ul > li > a:hover {
color:#8F1E3E;
}
#cssmenu > ul > li:first-child > a {
}
#cssmenu > ul > li > a:after {
content: '';
position: absolute;
}
#cssmenu ul li.has-sub:hover > a:after {
position: absolute;
top: 28px;
left: 11px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #3d0d1d;
border-left: 7px solid transparent;
border-bottom-color: rgba(61, 13, 29, 1);
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #3d0d1d transparent;
}
#cssmenu > ul > li.has-sub > a:before {
}
#cssmenu > ul > li.has-sub:hover > a:before {
}
#cssmenu ul li.has-sub:hover > a {
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
color: #8F1E3E;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
padding: 10px 0;
background: #490f20;
border-radius: 0px 0px 0px 0px;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-size: 13px;
font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
text-transform:uppercase;
letter-spacing: 1px;
font-weight:normal;
-webkit-font-smoothing: antialiased;
line-height:25px;
}
#cssmenu ul ul a:hover {
color: #ffffff;
background-color:#8F1E3E;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}
Here you go buddy hope this helps
Jsfiddle
<div class="navigation">
<div class="container">
<div class="logo">
<!-- <img src="#" alt=""> -->
<span>LOGO</span>
</div>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
</div>
</div>
.navigation {
float: left;
width: 100%;
padding: 10px 0;
border-bottom: 2px solid black;
}
.container {
max-width: 90%;
margin: 0 auto;
position: relative;
}
.logo {
position: absolute;
top: 0;
left: 0;
}
nav ul {
margin: 0 auto;
text-align: center;
}
nav ul li {
display: inline-block;
}
I have a link like this
<li><a class='myclass' href="<?php echo base_url();?>index.php/controller">Search</a></li>
and my jquery is
$("a.myclass").click(function(){
var link = $(this);
var url = link.attr("href");
$(".content").load(url);
return false;
});
actually it links correctly the problem is my list in my menu looks ugly not it looks it should be though other li looks ok. when i change to
<li><a class='.myclass.' href="<?php echo base_url();?>index.php/controller">Search</a></li>
it looks correctly but its not linking to anything.
What is the problem here?
Here is my css
.webwidget_vertical_menu {
float: left;
width: 20%;
background-color: #fff;
padding-bottom: 10px;
}
.webwidget_vertical_menu ul{
padding: 0.5px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.webwidget_vertical_menu li{
}
.webwidget_vertical_menu ul li{
list-style: none;
position: relative;
}
.webwidget_vertical_menu ul li a{
padding-left: 15px;
text-decoration: none;
}
.webwidget_vertical_menu ul li ul{
display: none;
position: absolute;
background-color: #fff;
z-index: 999999;
}
.webwidget_vertical_menu ul li ul li{
position: relative;
margin: 0px;
border:none;
}
.webwidget_vertical_menu ul li ul li ul{
}
.webwidget_vertical_menu_down_drop{
background-position: right center;
background-repeat:no-repeat !important;
}
.webwidget_vertical_menu ul li li{
font-weight: normal;
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 80%;
max-width: 1260px;
background: #FFF;
margin: 0 auto;
}
.header {
background-color: #ADB96E;
}
.sidebar1 {
float: left;
width: 20%;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: right;
width: 20%;
background-color: #EADCAE;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px; }
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
list-style: none;
position:relative;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background-color: #C6D580;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #ADB96E;
color: #FFF;
}
/* ~~The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;
clear: both;
}
/* ~~miscellaneous float/clear classes~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.menu {
color: #414141;
font-size:16px;
font-weight:650;
text-align: center;
}
You don't need the dot (.) in class name.
Try this:
<li><a class='myclass' href="<?php echo base_url();?>index.php/controller">Search</a></li>
And jquery...
// This means select the `<a>` element with class `myclass`.
// Dot (.) means class selector.
$("a.myclass").click(function(){
var link = $(this);
var url = link.attr("href");
$(".content").load(url);
return false;
});
Well, I need more conditions to answer exactly, but I guess there are some css styles for myclass. Try to rename myclass to something like f-ajax-link-selector (don't forget to change it in JS) and try to refresh the page.