1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need some CSS help

Discussion in 'HTML & Website Design' started by theredgiant, Aug 23, 2017.

  1. #1
    Hello,

    I have a blogger template that I'm trying to fix some issues.
    SEMrush
    https://xadowtemplate.blogspot.in/

    ISSUE#1:
    On mobile, or when you resize the viewport, the familiar hamburger menu icon appears on the top left. The icon is very tiny and difficult to hit on mobiles. I want to add some padding to the icon to increase the active area. I'm not able to figure out where in the stylesheet should I add it.

    Can anybody help?

    Please open that template page and view the source. The style is right there in the source. No need to download a separate CSS file.

    ISSUE#2
    When you scroll the page, the navigation menu shrinks and gets fixed at the top of the page. I want to know which parameter controls the height of the navigation bar.

    Thanks
     
    theredgiant, Aug 23, 2017 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,035
    Likes Received:
    1,147
    Best Answers:
    22
    Trophy Points:
    400
    #2
    That hamburger menu fa-bars is part of your font awesome css: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css Since you don't have access to that file, try adding padding to .z-xadow and #x-xadow in your css. If that doesn't help (if you don't have access to that file either) you can just add style="" to

    
    <i aria-hidden='true' class='fa fa-bars' style='padding: 0.9em;'></i>
    
    Code (markup):
    It seems like the nav bar is controlled by style="" within the page:

    
    <div class="header-wrapper" id="header-wrapper" style="position: fixed; padding: 0px; top: 0px; z-index: 999999; right: 0px; left: 0px; background: white; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px 0px;">
    
    Code (markup):

    -
     
    qwikad.com, Aug 23, 2017 IP
  3. theredgiant

    theredgiant Well-Known Member

    Messages:
    722
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Thanks for the help. Got the icon padding right, but the still can't figure out the menu height.

    There are some classes with suspicious sounding names such as .header-limit and .height_from_top. Tried to add a height value to it but it's not working. I will keep looking.
     
    theredgiant, Aug 23, 2017 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #4
    .header-limit is the one controlling the height of the menu / sticky header, although for some reason it only seems to work for heights ABOVE 60px - if I decrease the height below 60px, it doesn't seem to affect it at all. Increasing it above 60px, however, works, and the height increases.
     
    PoPSiCLe, Aug 24, 2017 IP