Barber Theme Header Area

fertilefrog · January 2015

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 · January 2015

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 · January 2015

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; }
}

Barber Theme Header Area

Comments