Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • January 13, 2016 at 4:18 pm #564777
    foggygolf30

    Hi

    I’m looking to change the layout of the header similar to the website in private link below.

    I’d like the Logo on the left, navigation on the right but more spaced out than i have currently, directly above the nav i would like a telephone number but bigger than the option to add an additional header allows, ideally the number would be within the actual header as per the example.

    Any help would be greatly appreciated.

    Many thanks

    Richard

    January 13, 2016 at 4:25 pm #564781
    Yigit

    Hi foggygolf30!

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

     .av-main-nav > li > a {
    padding: 0 20px;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Then refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add a widget area to your header and place your phone number inside it using a text widget

    Regards,
    Yigit

    January 13, 2016 at 4:50 pm #564800
    foggygolf30

    Thanks Yigit, thats worked bar the positioning of the added text in the header, in the css how would i get the end of the added txt (tel number) to align up with the end of the nav bar items?

    Also if i want to change the font, size colour etc is this done by adding this to the same css?

    January 13, 2016 at 4:52 pm #564803
    Yigit

    Hi!

    Please add following code to Quick CSS 

    #header .widgettitle {
    border: none!important;
    text-align: right;
    color: red; 
    font-size: 12px;
}

    Cheers!
    Yigit

    January 13, 2016 at 4:57 pm #564809
    foggygolf30

    Yigit you are a legend!

    2 more questions, how do i change the text from Caps?

    How do i remove this when being viewed on a smaller screen?

    January 13, 2016 at 5:05 pm #564819
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    #header .widgettitle {
    text-transform: none;
}
@media only screen and (max-width: 767px) {
#header .widget { display: none !important; }}

    Regards,
    Yigit

    January 13, 2016 at 5:13 pm #564830
    foggygolf30

    Brilliant thanks, do you know what the default font is for the nav bar so i can use it for the “Call us” text.

    January 13, 2016 at 5:31 pm #564854
    Yigit

    Hey!

    Main menu items are 13px. You can change it in Enfold theme options > Advanced Styling > Main menu links

    Best regards,
    Yigit

    January 13, 2016 at 11:26 pm #565055
    foggygolf30

    Hey Yigit

    Since making the above changes my nav bar and also the logo in the top left are no longer clickable?

    Any ideas?

    Many thanks

    Richard

    January 14, 2016 at 12:28 pm #565344
    Rikard

    Hi Richard,

    Please try the following as well:

    #header .widget {
    z-index: 100 !important;
}

    Regards,
    Rikard

    January 14, 2016 at 1:04 pm #565369
    foggygolf30

    The links now seem to work but are only clickable if i put my cursor about a finger space below the actual text link

    January 14, 2016 at 3:15 pm #565418
    foggygolf30

    Any ideas how to make it so the link is clickable when you actiually click on the text opposed to a couple of cm below?

    January 14, 2016 at 3:42 pm #565441
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #header .widget, #header .widgettitle {
    padding-bottom: 0!important;
}

    Cheers!
    Yigit

    January 14, 2016 at 3:44 pm #565443
    foggygolf30

    Yigit as i said before you are a LEGEND! Works a treat!

    January 14, 2016 at 3:46 pm #565447
    Yigit

    Hi!

    You are welcome!
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Header Size’ is closed to new replies.