Hello, I have a blogger template that I'm trying to fix some issues. 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
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): -
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.
.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.