Barber Theme Header Area

fertilefrog

Hi, I am trying to recreate the theme header for the Barber demo. However am struggling to get to grips with the functionality. How do I get the menu to be below the dark grey header and reduce the distance between the header and the top of the image of the girl? Also, what font is used for the main navigation menu items? Thanks!

fertilefrog

Here is the development site (I've added a space in this link as I don't want the development site indexing by search)  >> http://79.170.44.102/yourfacedoctor. co.uk/

Albert

Hi,

for this demo, we used Stack: Center header layout with a little bit of custom css in Theme options > Layout > Custom CSS & JS > Custom CSS section:

@media only screen and (min-width: 1240px) {
    #Top_bar:not(.is-sticky) .menu_wrapper { width: 100%; }
    #Top_bar:not(.is-sticky) .menu { text-align: center; padding: 20px 0; }
    #Top_bar:not(.is-sticky) .menu > li { display: inline-block; float: none; }
    .header-stack #Top_bar, #Top_bar #menu { background-color: transparent !important; }
}

.header-stack #Top_bar .logo { padding: 20px 0; background-color: #333; }
.header-stack #Top_bar { left: 0; position: absolute; top: 0; }
.header-stack #Top_bar .container  { width: 100%; }
.header-stack #Top_bar .one.column { width: 100%; margin: 0; }

.header-stack #Top_bar .menu > li a:after { display: none; }
.header-stack #Top_bar .menu > li > a span:not(.description) { line-height: 40px; }

@media only screen and (max-width: 767px) {
    .header-stack #Top_bar { position: static; }
    .header-stack #Top_bar .top_bar_left { margin-top: 0; }
    .header-stack #Top_bar .container { width: 100% !important; }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next