Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Image with Overlay Header

    • 10 years, 3 months ago orion1978
      Participant

      Expired

      Hi,

      I just got your theme and I really like it. I’m trying to replicate the header exactly as you have it here: https://codeless.co/specular/default/?page_id=1010

      However, I’m having the issues below. Here is a link to my site:https://www.squarefootcreative.com/rainbow/about-us-2/leadership/board-of-directors/

      • There’s a line/shadow showing at the bottom of the navigation menu. How can I remove it?
      • My logo is not showing.
      • When I scrolled down, the sticky navigation bar text says white, how can I change this to black like you have it?
      • How do I get the parallax effect like you have it? Currently, my picture doesn’ move with scrolling.

      Thanks,

      Carolina

    • 10 years, 3 months ago orion1978
      Participant

      Expired

      Relevant to my header issue, I’m also having trouble with the name of the pages not showing completely when I decrease the screen width. See this page for an example: https://www.squarefootcreative.com/rainbow/for-owners/owner-success-stories/

      I would also like to show both title and subtitle like you have it here: https://codeless.co/specular/default/?page_id=122. How can I make this the standard?

    • 10 years, 2 months ago orion1978
      Participant

      Expired

      Hi, I was able to figure out a couple of things. However, I still have some issues. Here are some screenshots that will give you a detailed explanation fo the issues that I’m encountering with the header: https://www.evernote.com/shard/s554/sh/4fab4e51-85d7-4231-9589-dd47e8bece35/3c01e590534d64744fea273d31ed1724.

       

      https://www.evernote.com/shard/s554/sh/117fb5e9-d18f-4052-b106-f7db5b498569/166d13cbaff45ad5a3d547432dabcbe9. In this example from your demo, your sticky navigation menu font is white on top of the header photo. However, when scrolling down, the font changes to black. I want my sticky navigation to do the same.

       

      Thanks,

      Carolina

    • 10 years, 2 months ago orion1978
      Participant

      Expired

      One more thing. How do I minimize the space height between the menu and dropdown menu: https://www.evernote.com/shard/s554/sh/28a6ca0b-4c12-4419-8075-37bc572f07ab/012a049dbd646c20064364a59972bccc

    • 10 years, 2 months ago orion1978
      Participant

      Expired

      Is anyone planning to reply to this post. It’s been over three days with no response.

    • 10 years, 2 months ago Ruco
      Keymaster

      Hello,

      1. Add this code at Custom Css Box:

      .header_shadow_full .header_wrapper {
        -moz-box-shadow:none;
        -webkit-box-shadow: none;
        box-shadow: none;
      }

      2. can see your logo, have fixed the issue?
      3. You must change menu font color at general options -> menu options.
      5. Select Fixed background position at page options https://www.clipular.com/c/4841145730334720.png?k=FsrmOZchy4kRf402kufdJ_FuKFE

      6. You must turn on subtitle on page options https://www.clipular.com/c/5337134358593536.png?k=GhEzI0RDKMqcrv6W5lk2oQUMxpo

      7. Top navigation can’r be displayed on scroll window

      8. Add this css code:

      nav .menu > li > ul.sub-menu, nav .menu > li > ul.sub-menu ul {
      
        top: 74%;}

      Best regards!

      • This reply was modified 10 years, 2 months ago by Ruco.
    • 10 years, 2 months ago orion1978
      Participant

      Expired

      Hi,

      A lot of issues were resolved. However, there are still some outstanding items:

      1. I added the CSS code but the line/shadow is still showing
      2. The CSS code to minimize the space height between the main menu and the dropdown menu didn’t work. I tried several values and nothing changed.
      3. I want my menu font to be white. However, when scrolling down, I want it to change to black, just like you have in your demo here: https://codeless.co/specular/default/?page_id=1010

      Thanks,
      Carolina

       

    • 10 years, 2 months ago orion1978
      Participant

      Expired

      Still waiting for a reply…

    • 10 years, 2 months ago Ruco
      Keymaster

      Hello,

      Please can you write your site credentials in private reply? I can do the modifications for you.

      Best regards!

    • 10 years, 2 months ago orion1978
      Participant

      Expired

      This reply has been marked as private.
    • 10 years, 2 months ago orion1978
      Participant

      Expired

      This reply has been marked as private.
    • 10 years, 2 months ago Mirela
      Participant

      Hello,

      1-I added this code: .single-post .breadcrumbss { display: none;} into your custiom css box, to remove breadcrumbs in posts only. Where titles are longer. If you want to remove them through all site, edit this code by deleting only the “.single-post”.
      -I changed the font size in Styling Options > Default Page Header > Normal Style No Subtitle Title Typography to 20 and added this css: .single-post .header_page h1 { line-height: 40px; text-align: center;} to customize and fully display your long titles.
      -I added this code:

      @media (max-width:767px){
          .single-post .header_page h1 { line-height: 25px; text-align: center;}
          .single-post .header_page.normal h1 { font-size: 13px !important;}
      }

      for the responsive titles.

      2- I do not see the small menu in your site any more. Did you remove it? image

      3-For the menu sub-items, i added this code:

      nav .menu > li > ul.sub-menu li > .sub-menu {
        margin-left: 200px !important;
      }

      This is the result.

      Let us know if you need further help.

      Best regards!

      • This reply was modified 10 years, 2 months ago by Mirela. Reason: images
    • 10 years, 2 months ago orion1978
      Participant

      Expired

      This reply has been marked as private.
    • 10 years, 2 months ago orion1978
      Participant

      Expired

      This reply has been marked as private.
    • 10 years, 2 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      I added this line into your custom css box: nav .menu li ul.sub-menu li a { width: 100%;}. The menu is better now. As for the second request, sorry but is not possible.

      Best regards!

Viewing 14 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password