Tagged: 

Viewing 30 posts - 1 through 30 (of 34 total)
  • Author
    Posts
  • #223334

    Hi,

    I would like to customize the header using “Header with social icons and bottom Navigation”. I’ve read some of the forum topics and got myself the custom css below. Please help me with:

    1) Please let me know if the customs css below is OK
    2) How can I increase the height of the menu as in the screenshot?
    3) Using boxed layout how can I use a custom colour for the menu independently of the rest of the header as in the screenshot?
    4) How can I put 2 links in the header as in the screenshot?
    5) Using this header type how can I make it fixed please?
    Link to screenshot: http://awesomescreenshot.com/0842chyv92

    Thank you!

    /*TITLES NOT UPPERCASE */
    .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
     text-transform: none !important;
    letter-spacing: 1px;
    }
    /*DISABLE Secondary Menu ON TOP */
    #header_meta { display: none; }
    /*DISABLE VERTICAL LINES IN MENU */
    .bottom_nav_header.social_header .main_menu ul:first-child>li:first-child a {
    border: none;
    }
    .bottom_nav_header.social_header .main_menu ul:first-child>li a {
    border: none;
    }
    /*DISABLE SOCIAL ICONS  in HEADER*/
    #top .social_bookmarks { display: none; }
    #223503

    Hi costin!

    1- Yes, custom CSS you have added seems fine.
    2- Please add folowing code to Quick CSS as well and adjust as needed

    .bottom_nav_header.social_header .main_menu ul:first-child > li a {
    height: 50px;
    line-height: 50px;
    }

    3-

    #header_main_alternate, .header_color .main_menu ul {
    background-color: red; }

    4- Please refer to my post here https://kriesi.at/support/topic/add-text-information-to-header-area/#post-223049
    You can add your links instead of “your text goes here” using HTML ( http://www.w3schools.com/tags/tag_a.asp )
    5-

    #header { position: fixed; }
    #main { padding-top: 126px; }

    Best regards,
    Yigit

    #223514

    HI Yigit,

    Many thanks, everything seems to work for 2 & 3.

    For 4) That means that each time the theme updates I should modify it again… Is there another workaround maybe?

    For 5) Just a mention, I would like the header to be fixed and stretched. What should I add please?

    Thank you!

    #223546

    Hey!

    4- Please remove following code from Quick CSS

    #header_meta { display: none; }

    and add following code instead

    #header_meta { margin-top: -30px; }
    .sub_menu { top: 175%; }

    Secondary menu should be displayed there.
    5- Can you post the link to your website? It should be fixed but if you are using boxed layout, please add following code to Quick CSS as well

    #header { width: auto; }

    Cheers!
    Yigit

    #223564
    This reply has been marked as private.
    #223570

    Hey!

    4- Please adjust the code to following

    .sub_menu {
    top: 250%;
    }

    5- You are going to need to hire a freelance developer for that kind of customization as it is beyond the scope of support we can provide. You can also request quote here.
    6-

    .hr-short { margin: 15px 0; }

    Regards,
    Yigit

    #223575

    4) OK, great.
    5) I thought this is something easy to do as the default header is fixed+shrinking… Something like that I’d like to achieve.
    6) It’s working but the strange part is that only for the one place, the heading in the middle (H2). For the other ones (H1 &it’s H2) it’s not working.

    Thank you!

    #223578

    Hey!

    You can try adding !important rule to force it as following

    .hr-short { margin: 15px 0!important; }

    If that does not work, please point out the section on your website
    Unfortunately, it is not that easy to pull that off with the type of header you are using.

    Cheers!
    Yigit

    #223602
    This reply has been marked as private.
    #223603

    Hi!

    Please add following code to Quick CSS as well

    .template-page .entry-content-wrapper h1 { padding-top: 10px; }
    #top .header_color .sub_menu ul li a:hover { color: red; } 
    .header_color .sub_menu>ul>li>a { color: green; }

    Regards,
    Yigit

    #223668

    Perfect Yigit, thank you!
    I’ve noticed the bold font colour is blue. There is a setting to change that or just custom css (which one please)?

    #223725

    Hi!

    Please add following code to Quick CSS as well

    .main_color strong, .alternate_color strong { color: inherit; }

    This code will make it the same color as your text color

    Best regards,
    Yigit

    #224636
    This reply has been marked as private.
    #225024

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab
    1-

    .bottom_nav_header.social_header #header_main .container {
    height: 160px; }

    You can adjust the size. By default it is 88px
    2-

    .content, .sidebar {
    padding-top: 10px;
    padding-bottom: 10px; }

    3-

    .header_color .main_menu ul:first-child > li > a { color: white; }

    4-

    #top .header_color .main_menu .menu ul li>a:hover {
    color: red;
    }
    .header_color .main_menu .menu ul li a {
    color: green; }

    Best regards,
    Yigit

    #225427
    This reply has been marked as private.
    #226706

    Hi!

    Please add following code to Quick CSS
    1-

    .bottom_nav_header.social_header #header_main .container {
    height: 110px; }
    .logo img { padding-top: 20px; }

    4-

    body div .avia-button { color: white!important; }

    5- You can choose to display Alternate color on certain elements such as Color Section
    6-

    .sidebar a { font-size: 16px; }

    7-

    #scroll-top-link:hover {
    background-color: purple;
    color: orange;
    border: 1px solid yellow;
    }
    #scroll-top-link {
    background-color: blue;
    color: green;
    border: 1px solid red;
    }

    8-

    .sub_menu>ul>li>a, .sub_menu>div>ul>li>a { font-size: 18px; }

    Regards,
    Yigit

    #227141
    This reply has been marked as private.
    #227145

    Hi!

    Please add following code to Quick CSS as well
    1-

    .avia-icon-list-container { margin: 10px 0; }</Coe>

    2- You can add Color Section element and add background image to it and make it fixed
    3-

    .main_color .avia-icon-list .iconlist_icon:hover {
    background-color: red!important; }

    Regards,
    Yigit

    #227330
    This reply has been marked as private.
    #227506

    Hey!

    2- You can add horizontal ruler element to increase the height.
    3- Code is not being applied on your website. Please try adding it to Custom.css file inside Enfold/Css folder. Code works fine on my installation
    4-

    .content { padding-top: 20px; }

    Regards,
    Yigit

    #227726
    This reply has been marked as private.
    #228164

    Hi!

    Please try adding following code to quick CSS
    1-

    #av_section_1 .avia-section {
    min-height: 180px!important;
    }

    2-

    .main_color .avia-icon-list .iconlist_icon:hover { color: green; }

    3-

    .hr-short { margin-bottom: -15px !important; }

    Regards,
    Yigit

    #231138
    This reply has been marked as private.
    #231674

    Hey!

    Please add following code to Quick CSS and adjust as needed

    .main_color .avia-icon-list .iconlist_icon {
    background-color: orange;
    }
    #main {
    padding-top: 193px;
    }

    Best regards,
    Yigit

    #231949
    This reply has been marked as private.
    #231960

    Hi!

    Sure, please post them here privately

    Best regards,
    Yigit

    #232106
    This reply has been marked as private.
    #232308

    Hi!

    Please review your website. I have added custom CSS code to bottom of Quick CSS section and made some small changes on color section element

    Cheers!
    Yigit

    #232327
    This reply has been marked as private.
    #232892

    Hey!

    I have added a new color section element on top of the one you have previously added. Please check your website while logged out then you can go ahead and remove the color section you have created.
    Please add following code to Quick CSS and adjust as needed

    .content { padding-top: 10px; padding-bottom: 10px; }

    I have checked your page and could not see an issue. Can you post a screenshot?

    Best regards,
    Yigit

Viewing 30 posts - 1 through 30 (of 34 total)
  • The topic ‘Header with social icons customization’ is closed to new replies.