1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Is it possible to make Header like thisiswhyimbroke.com on wordpress?

Discussion in 'Graphic Design' started by butusov, Jun 12, 2017.

  1. butusov

    butusov Junior Member

    Joined:
    May 8, 2016
    Messages:
    145
    Likes Received:
    31
    Gender:
    Male
    Without deep knowledge of css? i know they didnt build it on wordpress but does it matter?
    have tryed many themes, and UberMenu, MegaMenu plugins
    but nothing come close to their top header menu, also very responsive on mobile/tablet version.
    the colorful background for each tab, and icon what is needed i guess
    god i get hard only by looking at it

    anyone can navigate what exactly i gotta learn for this would be very thankful!
    if css is necessary please provide a little info on what exactly in css.

    Thank you for your answers people!!
     
  2. sturose

    sturose Jr. VIP Jr. VIP

    Joined:
    Nov 6, 2013
    Messages:
    1,809
    Likes Received:
    2,219
    Gender:
    Male
    Occupation:
    Self unemployed
    Location:
    Right behind you!
    What exactly are you looking for? Similar buttons? The hover effect?

    The tabs themselves are nothing special, just symbols and text on a coloured background. The hover effect could probably be achieved with some simple css.

    Somebody more knowledgeable about coding should be able to point you in the right direction.
     
    • Thanks Thanks x 1
  3. Count Dracula

    Count Dracula BANNED BANNED

    Joined:
    May 9, 2017
    Messages:
    96
    Likes Received:
    49
    Gender:
    Male
    CSS is client side , you can easily copy his html+css code for header and then change the classes .
     
    • Thanks Thanks x 1
  4. davids355

    davids355 Jr. VIP Jr. VIP

    Joined:
    Apr 25, 2011
    Messages:
    10,429
    Likes Received:
    8,128
    If you want to do it yourself then just look for a similar theme that already exists in WP and use that.
    Or you can hire a developer to get something similar coded.
    Depends on your budget really.
     
    • Thanks Thanks x 1
  5. RightFootFanatic

    RightFootFanatic Regular Member

    Joined:
    May 31, 2015
    Messages:
    388
    Likes Received:
    216
    Occupation:
    DevOps
    Location:
    Whimsyshire
    If gonna build it yourself you would like to dive into:

    - inline lists
    - nested lists
    - for animations with css in transistions
    - basic styling with paddings, background
    - for icons look for icon fonts

    see:
    - http://css.maxdesign.com.au/listamatic/ (lists)
    - https://css-tricks.com/almanac/properties/l/list-style/
    - https://css-tricks.com/almanac/properties/t/transition/
    - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
    - https://www.w3schools.com/css/css3_transitions.asp
    - http://fontawesome.io/
    - https://css-tricks.com/examples/IconFont/

    // Edit
    If you wanna have that mobile friendly with changing menu items you should have a look at css media queries
     
    • Thanks Thanks x 1
    Last edited: Jun 12, 2017