I am trying to make the page linked responsive, specifically the menu bar. I've added the following CSS hoping to make the menu responsive but as soon as I drag the page down past about 1140 px width a gap appears between the menu bar and the slider above it. This gets progressively wider the narrower the page gets. Is there anyway to fix this ?
The font property is not having any effect, I've looked in the CSS file but cannot find the ID or class that controls font size in the menu ?
Page link: http://dbtest.destinationballybunion.ie/?page_id=2160
Here's the CSS I've added:
#access {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/05
/new-menu-back1.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: contain;
}
#access {
position: absolute;
top: 4.35%;
left: 0%;
right: 0%;
z-index: 100;
}
#access a {
padding-top: 15px;
padding-bottom: 11px;
}
#access a {
font-size: 4.5vw;
}
The class .culture appears to have a margin top on it of 30px. If you remove that, it should fix it.
Looking at the css stylesheet it seems like the id (#access a) is being overruled by this line of css:
NAV DIV UL LI.page_item.page-item-1145 A.
You could add !important to #acess a or you could alter the class NAV DIV UL LI.page_item.page-item-1145 A to control the font size within the menu bar.
Related
I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.
My staging site is here http://7a9.007.myftpupload.com/
If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)
I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?
Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.
style.css
.home #main-content.trans-header, .page #main-content.trans-header {
/* margin-bottom: -89px; */
}
layout.css
.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
position: relative;
/* top: -149px; */
}
#header-wrap {
position: absolute;
background: #29333d;
width: 100%;
}
To reduce the white-space for the both pages, pull the footer up using negative top margin like this:
#footer-widgets {
margin-top: -100px;
}
And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:
.vc_custom_1492563370829 {
margin-bottom: -50px !important; /*add this*/
border-bottom-width: 0px !important;
background-color: #1c89ab !important;
}
I made some customization on my site, but noticed one issue that i cant resolve. Because main menu have fixed width, now main menu, and search and cart icons are overlapping with main menu, making contact page unaccessible. So how to make main menu, a little to left, so contact page will be usable ?
This is CSS from that part:
.wr-megamenu-container ul.wr-mega-menu {
z-index: 9999;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
May be you should try to reduce the padding of each menu element, this way:
.header-primary-nav .wr-mega-menu.nav-menu> li >a { padding: 0 8px;}
Then you will also need to change your menu float rule from right to left this way:
.logo-wrapper .header-primary-nav, .logo-wrapper .hgroup-sidebar { float: left; }
This should solve your issue…
Working on a page for a gym (http://purcraft.com/madeinla/the-gym/) and there's supposed to be a background image of the gym on this page. Instead, there's only a slight portion of the image in this div. The rest of black but I've been playing around with it inspector and I can't even locate a background color at all for the div's after this area. So why would I be getting this? Here's my CSS:
body.page-id-30 .site-content { background-image: url(images/bkg-gym.jpg); background-size: cover; }
body.page-id-30 .copy-gym { position: absolute; left: 250px; bottom: 38px; width: 530px; font-family: 'texgyreheroscnregular', sans-serif; text-align: center; text-transform: uppercase; }
Start with removing the position:absolute; attribute from the div of class "copy-gym".
I don't know how exactly you'd like the page to look like but I'd suggest you to try using a ready css layout because it seems that you use too much divs for a very simple layout.
http://www.dynamicdrive.com/style/layouts/
There for example you can find sample layouts for use.
I downloaded a CSS Menu from here and trying to make some changes, here is fiddle file jsfiddle and the full screen result.
Now I trying to do 2 things:
Make Logo text/image not to have hover
Fix the width, I put 100% but if you look at full screen result you will notice what is wrong
Change line 42 to: #navbar li:not(:first-child):hover {
This will make sure the hover effect is not applied to the first <li> which in your case contains the logo. jsFiddle
This is called CSS Selectors Level 3
To fix your nav position use:
#nav {
width: 100%;
position: fixed;
margin: 0 auto;
left: 0px;
}
EDIT: if you still want the little margin on each side use:
#nav {
position: fixed;
margin: 0;
left: 1%; /* you can change this to whatever margin you like */
right: 1%;
}
and add:
#navbar {
width: auto;
}
Try #navbar>li:first-child~li:hover. I updated your fiddle at
http://jsfiddle.net/PHPglue/h4uL6/7/
If you do need a fixed position for some reason, wrap the entire code in a <div>, position:absolute; it and give it the same width and margins as I gave #nav to this <div> then make #nav's position:fixed;.
I'm using a responsive wordpress theme that is based on twitter bootstrap. For some reason the side bar images aren't resizing correctly. (You can see what I mean by checking out the [site][1] and trying to resize.) I was approaching this by declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. The image / contact form looks fine when you are on a desk top but as you compress the layout (for instance on an iphone) the contact form and image do not resize correctly. I'm not sure where to go from here and sort of stuck.
Here's the css I'm using now (which may not be correct.) Thanks!
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 300px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 0px;
}
.widget .signupForm form input {
display: block;
}
#media screen and (min-width: 768px) {
/* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 0px;
}
I can detect 3 problems at a width of 800px:
.widget .signupForm has a width of 300px. It should be auto or 100%. Then form elements are to be sized accordingly, if needed (btw the submit button has same text and background than the text input. It seems we have 2 informations to type when in fact it's the action button. It doesn't need to be white on blue, maybe a darker grey would be sufficient. I'm not a designer, though ;) )
Facebook widget has a fixed width. Does it exist a mobile version of this widget?
same problem with the Instagram one: images have an HTML width attribute of 300 (pixels).
The Following css applies to your page when it gets resized. Not sure which file is applying it.Find this class in your css files and add a width to it, say width:300px if you want it to be a perfect square or any other value.
.widget .signupForm {
background-color: #06D0D2;
background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 300px;
width:300px; /* code added here */
position: relative;
}
Hope it helps,if i havnt understood ur problem or this is not the solution you were looking for - do comment..