Forum Replies Created

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter jdbaba

    (@jdbaba)

    Hi I think I have fixed that issue. Thank you for your reply. I will close this thread as resolved.

    Did you mean to add the slide info to your slider ?

    Thread Starter jdbaba

    (@jdbaba)

    I did clean my history and cache. The only issue is when I open the website and click on the menu nothing happens. But it gives options only if i scroll down. Same behavior on my Note 4 and Iphone 5. In iphone 5, the menu is not sticky. I want the menu to be sticky on all the devices. Do I need to add iphone specific code ?

    Also I want to reduce the spacing between the address on the top and the slider. I couldn’t do that. Any help is highly appreciated. Thanks.

    Thread Starter jdbaba

    (@jdbaba)

    Hi,

    Thank you for replying to my thread. Zerif-lite is a wordpress theme. Right now I am having problem on the navigation toggle button. It doesn’t show the options when I click on the navigation button. However, if I scroll down and then click on the navigation toggle button it displays the menu. I am using android and iphone both to test my website. If you could take a look that would be great.

    The code I am using for the navigation menu so far is as follows:
    Not sure how much of this code do I need.

    @media screen and (max-width: 480px){
    .navbar {
    	background: #FFF;
    	border: 0;
    	border-radius: 0 !important;
    	text-align: left;
    	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    }
    }
    
    @media screen and (max-width: 480px){
    #main-nav {
    	position: fixed;
    	width: 100%;
    	z-index: 1000;
    	min-height: 75px;
    }
    }
    
    @media screen and (max-width: 480px){
    #main-nav.fixed {
    	position: fixed;
    	top: 0;
    }
    }
    
    .nav li a.nav-active {
    	color: #b8db4d !important;
    }
    .nav li a.nav-active:before {
    	position: absolute;
    	margin: auto;
    	z-index: 1;
    	content: "";
    	width: 75%;
    	height: 2px;
    	background: #b8db4d;
    	bottom: 0px;
    	left: 12.5%;
    }
    .navbar-inverse .navbar-nav >li {
    	display: inline;
    	margin-right: 20px;
    	margin-top: 20px;
    }
    .navbar-inverse .navbar-nav>li:last-child {
    	margin-right: 0 !important;
    }
    .navbar-inverse .navbar-nav>li>a {
    	color: #404040;
    	padding: 0;
    	line-height: 35px;
    }
    .navbar-inverse .main-navigation ul > li {
    	display: inline;
    	margin-right: 20px;
    	margin-top: 20px;
    }
    .navbar-inverse .main-navigation > ul > li:last-child {
    	margin-right: 0 !important;
    }
    .navbar-inverse .main-navigation > ul > li > a {
    	color: #404040;
    	padding: 0;
    	line-height: 35px;
    }
    .navbar-inverse .navbar-nav ul.sub-menu {
    	display: none;
    	position: absolute; top: 100%;
    	background:#fff;
    	width:200px;
    	box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
    }
    .navbar-inverse .navbar-nav ul.sub-menu {
    	margin:0;
    }
    .navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
    	position: absolute;
    	left:100%;
    	top:0;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li {
    	float: none;
    	position: relative;
    	list-style:none;
    	padding:10px;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li a {
    	color:#404040;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
    	color:#b8db4d;
    }
    .navbar-inverse .navbar-nav li:hover > ul.sub-menu {
    	display: block;
    }	
    
    .navbar-brand {
    	height: 76px;
    	position: relative;
    	line-height: 45px;
    }
    .current a {
    	color: #b8db4d !important;
    	position: relative;
    	outline: none;
    }
    .current:before {
    	position: absolute;
    	margin: auto;
    	z-index: 1;
    	content: "";
    	width: 75%;
    	height: 2px;
    	background: #b8db4d;
    	bottom: 0px;
    	left: 12.5%;
    }
    .navbar-inverse .navbar-nav>li>a:hover {
    	color: #b8db4d;
    	outline: none;
    }
    
    @media screen and (max-width: 480px){
    .navbar-toggle {
    	border: 0;
    	background-color: #808080;
    	margin-top: 23px;
    }
    }
    
    .navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
    	background-color: #b8db4d;
    	filter: alpha(opacity=100);
    	opacity: 1;
    	box-shadow: none;
    }
    
    @media screen and (max-width: 480px){
    .navbar-toggle.active{
        background-color: #b8db4d !important;
    }
    }
    
    @media screen and (max-width: 480px){
    .navbar-toggle.collapsed{
        background-color: #808080 !important;
    }
    }
    Thread Starter jdbaba

    (@jdbaba)

    Hi,

    Thank you for replying to my thread. Zerif-lite is a wordpress theme. Right now I am having problem on the navigation toggle button. It doesn’t show the options when I click on the navigation button. However, if I scroll down and then click on the navigation toggle button it displays the menu. I am using android and iphone both to test my website. If you could take a look that would be great.

    The code I am using for the navigation menu so far is as follows:
    Not sure how much of this code do I need.

    [Large code excerpt removed by moderator per forum rules. Please use Pastebin or a Gist for all large code excerpts, they work better anyway.]

    Thread Starter jdbaba

    (@jdbaba)

    I have fixed that recently. Thanks for taking a look.

    Thread Starter jdbaba

    (@jdbaba)

    Hey thanks for your reply. But right now it seems the content is not displayed correctly on mobile. Any suggestions ?

Viewing 7 replies - 1 through 7 (of 7 total)